khronosschoty
/
palemoon-dev


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<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 = "<table cellpadding='0' cellspacing='0' width='" +
                       img.width + "' height='" + img.height + "'>\n";

        for (var y = 0; y < img.height; y++) {
            imghtml += "<tr height='1'>\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 += "  <td width='1' style='background-color: " +
                                "rgba(" +
                                r + "," +
                                g + "," +
                                b + "," +
                                alpha +
                                ")'></td>\n";
            }

            imghtml += "</tr>\n";
        }

        imghtml += "</table>\n";

        span.innerHTML = imghtml;
        textarea.value = "<html><body>\n" + imghtml + "</body></html>";

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

</body>
</html>