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

¤ Dauer der Verarbeitung: 0.3 Sekunden ¤

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.