1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/image/test/reftest/img2html.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,122 @@
1.4 +<html>
1.5 +<head>
1.6 +<title>Image-to-html converter</title>
1.7 +<style>
1.8 +#img, #canvas, #span {
1.9 + display: none;
1.10 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAL0lEQVQ4jWP09vZ+xoAHuLi44JNmYMIrSwQYNWAwGMBCKJ737NlDWxeMGjAYDAAAak4FtfgpsBoAAAAASUVORK5CYII=);
1.11 +}
1.12 +</style>
1.13 +</head>
1.14 +<body>
1.15 +<h2>Image-to-html converter</h2>
1.16 +<p>Enter the relative path to an image file, and this will convert it
1.17 +to a pure HTML representation (no images).</p>
1.18 +
1.19 +
1.20 +<form onsubmit="start_convert(); return false;">
1.21 + Path to image: <input type="text" id="filepath" size="60"><br>
1.22 + <input id="fill" type="checkbox">
1.23 + Fill canvas with <input id="fillRGB" value="rgb(10,100,250)"> (instead of transparency).<br>
1.24 + <button type='submit'>Convert!</button>
1.25 + <br><br>
1.26 + <img id="img" onload="run_convert();"><canvas id="canvas"></canvas><span id="span"></span><br>
1.27 + (img / canvas/ imghtml)
1.28 + <br><br>
1.29 + Result:<br>
1.30 + <textarea id="textarea" rows="10" cols="80"></textarea>
1.31 +</form>
1.32 +
1.33 +
1.34 +<script>
1.35 +var img = document.getElementById("img");
1.36 +var canvas = document.getElementById("canvas");
1.37 +var span = document.getElementById("span");
1.38 +var textarea = document.getElementById("textarea");
1.39 +var fill = document.getElementById("fill");
1.40 +var fillRGB = document.getElementById("fillRGB");
1.41 +
1.42 +function start_convert() {
1.43 + try {
1.44 +
1.45 + // Unhide stuff. They're initially hidden because the image shows a
1.46 + // broken-image icon on first page load, and the canvas defaults to a
1.47 + // large empty area.
1.48 + img.style.display = "inline";
1.49 + canvas.style.display = "inline";
1.50 + span.style.display = "inline-block";
1.51 +
1.52 + // Clear out any previous values.
1.53 + textarea.value = "(loading image)"
1.54 + span.innerHTML = "";
1.55 +
1.56 + // Get the image filename
1.57 + var input = document.getElementById("filepath");
1.58 + img.src = input.value;
1.59 +
1.60 + // We're done, let the onload handler do the real work.
1.61 + } catch (e) {
1.62 + alert("Crap, start_convert failed: " + e);
1.63 + }
1.64 +}
1.65 +
1.66 +function run_convert() {
1.67 + try {
1.68 + textarea.value = "(rendering canvas)";
1.69 +
1.70 + canvas.width = img.width;
1.71 + canvas.height = img.height;
1.72 + var ctx = canvas.getContext("2d");
1.73 + ctx.clearRect(0, 0, img.width, img.height);
1.74 + if (fill.checked) {
1.75 + ctx.fillStyle = fillRGB.value;
1.76 + ctx.fillRect (0, 0, img.width, img.height);
1.77 + }
1.78 + ctx.drawImage(img, 0, 0);
1.79 +
1.80 + // [r, g, b, a, r, g, b, a, ...]
1.81 + var pixels = ctx.getImageData(0, 0, img.width, img.height).data;
1.82 +
1.83 + var imghtml = "<table cellpadding='0' cellspacing='0' width='" +
1.84 + img.width + "' height='" + img.height + "'>\n";
1.85 +
1.86 + for (var y = 0; y < img.height; y++) {
1.87 + imghtml += "<tr height='1'>\n";
1.88 +
1.89 + textarea.value = "(converting row " + y + ")";
1.90 +
1.91 + for (var x = 0; x < img.width; x++) {
1.92 + var p = img.width * y * 4 + x * 4;
1.93 +
1.94 + var r = pixels[p + 0];
1.95 + var g = pixels[p + 1];
1.96 + var b = pixels[p + 2];
1.97 + var a = pixels[p + 3];
1.98 +
1.99 + var alpha = (a / 255).toString();
1.100 + alpha = alpha.substring(0, 6); // "0.12345678 --> 0.1234"
1.101 + imghtml += " <td width='1' style='background-color: " +
1.102 + "rgba(" +
1.103 + r + "," +
1.104 + g + "," +
1.105 + b + "," +
1.106 + alpha +
1.107 + ")'></td>\n";
1.108 + }
1.109 +
1.110 + imghtml += "</tr>\n";
1.111 + }
1.112 +
1.113 + imghtml += "</table>\n";
1.114 +
1.115 + span.innerHTML = imghtml;
1.116 + textarea.value = "<html><body>\n" + imghtml + "</body></html>";
1.117 +
1.118 + } catch (e) {
1.119 + alert("Crap, run_convert failed: " + e);
1.120 + }
1.121 +}
1.122 +</script>
1.123 +
1.124 +</body>
1.125 +</html>
