diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /image/test/reftest/img2html.html | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'image/test/reftest/img2html.html')
| -rw-r--r-- | image/test/reftest/img2html.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/image/test/reftest/img2html.html b/image/test/reftest/img2html.html new file mode 100644 index 000000000..57f45bbdd --- /dev/null +++ b/image/test/reftest/img2html.html @@ -0,0 +1,122 @@ +<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> |