summaryrefslogtreecommitdiffstats
path: root/image/test/reftest/img2html.html
diff options
context:
space:
mode:
Diffstat (limited to 'image/test/reftest/img2html.html')
-rw-r--r--image/test/reftest/img2html.html122
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>