Anforderungen  |   Konzepte  |   Entwurf  |   Entwicklung  |   Qualitätssicherung  |   Lebenszyklus  |   Steuerung
 
 
 
 


Quelle  img2html.html   Sprache: HTML

 
 products/Sources/formale Sprachen/C/Firefox/image/test/reftest/img2html.html


<html>
<head>
<title>Image-to-html converter</title>
<style>
#img, #canvas, #span {
    display: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAL0lEQVQ4jWP09vZ+xoAHuLi44JNmYMIrSwQYNWAwGMBCKJ737NlDWxeMGjAYDAAAak4FtfgpsBoAAAAASUVORK5CYII=);
}
</style>
</head>
<body>
<h2>Image-to-html converter</h2>
<p>Enter the relative path to an image file, and this will convert it
to a pure HTML representation (no images).</p>


<form onsubmit="start_convert(); return false;">
    Path to image: <input type="text" id="filepath" size="60"><br>
    <input id="fill" type="checkbox">
        Fill canvas with <input id="fillRGB" value="rgb(10,100,250)"> (instead of transparency).<br>
    <button type='submit'>Convert!</button>
    <br><br>
    <img id="img" onload="run_convert();"><canvas id="canvas"></canvas><span id="span"></span><br>
    (img / canvas/ imghtml)
    <br><br>
    Result:<br>
    <textarea id="textarea" rows="10" cols="80"></textarea>
</form>


<script>
var img      = document.getElementById("img");
var canvas   = document.getElementById("canvas");
var span     = document.getElementById("span");
var textarea = document.getElementById("textarea");
var fill     = document.getElementById("fill");
var fillRGB  = document.getElementById("fillRGB");

function start_convert() {
    try {

        // Unhide stuff. They're initially hidden because the image shows a
        // broken-image icon on first page load, and the canvas defaults to a
        // large empty area.
        img.style.display    = "inline";
        canvas.style.display = "inline";
        span.style.display   = "inline-block";

        // Clear out any previous values.
        textarea.value = "(loading image)"
        span.innerHTML = "";

        // Get the image filename
        var input = document.getElementById("filepath");
        img.src = input.value;

        // We're done, let the onload handler do the real work.
    } catch (e) {
        alert("Crap, start_convert failed: " + e);
    }
}

function run_convert() {
    try {
        textarea.value = "(rendering canvas)";

        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, img.width, img.height);
        if (fill.checked) {
            ctx.fillStyle = fillRGB.value;
            ctx.fillRect (0, 0, img.width, img.height);
        }
        ctx.drawImage(img, 0, 0);

        // [r, g, b, a, r, g, b, a, ...]
        var pixels = ctx.getImageData(0, 0, img.width, img.height).data;

        var imghtml = "img.width + "' height='" + img.height + "'>\n";

        for (var y = 0; y < img.height; y++) {
            imghtml += "\n";

            textarea.value = "(converting row " + y + ")";

            for (var x = 0; x < img.width; x++) {
                var p = img.width * y * 4 + x * 4;

                var r = pixels[p + 0];
                var g = pixels[p + 1];
                var b = pixels[p + 2];
                var a = pixels[p + 3];

                var alpha = (a / 255).toString();
                alpha = alpha.substring(0, 6); // "0.12345678 --> 0.1234"
                imghtml += " \n";
            }

            imghtml += "\n";
        }

        imghtml += "
"rgba(" +
                                r + "," +
                                g + "," +
                                b + "," +
                                alpha +
                                ")'>
\n"
;

        span.innerHTML = imghtml;
        textarea.value = "\n" + imghtml + "";

    } catch (e) {
        alert("Crap, run_convert failed: " + e);
    }
}
</script>

</body>
</html>

Messung V0.5
C=81 H=99 G=90

¤ Dauer der Verarbeitung: 0.26 Sekunden  (vorverarbeitet)  ¤

*© Formatika GbR, Deutschland






Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.






                                                                                                                                                                                                                                                                                                                                                                                                     


Neuigkeiten

     Aktuelles
     Motto des Tages

Software

     Produkte
     Quellcodebibliothek

Aktivitäten

     Artikel über Sicherheit
     Anleitung zur Aktivierung von SSL

Muße

     Gedichte
     Musik
     Bilder

Jenseits des Üblichen ....
    

Besucherstatistik

Besucherstatistik

Monitoring

Montastic status badge