image/test/reftest/img2html.html

   1 <html>
   2 <head>
   3 <title>Image-to-html converter</title>
   4 <style>
   5 #img, #canvas, #span {
   6     display: none;
   7     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAL0lEQVQ4jWP09vZ+xoAHuLi44JNmYMIrSwQYNWAwGMBCKJ737NlDWxeMGjAYDAAAak4FtfgpsBoAAAAASUVORK5CYII=);
   8 }
   9 </style>
  10 </head>
  11 <body>
  12 <h2>Image-to-html converter</h2>
  13 <p>Enter the relative path to an image file, and this will convert it
  14 to a pure HTML representation (no images).</p>
  15
  16
  17 <form onsubmit="start_convert(); return false;">
  18     Path to image: <input type="text" id="filepath" size="60"><br>
  19     <input id="fill" type="checkbox">
  20         Fill canvas with <input id="fillRGB" value="rgb(10,100,250)"> (instead of transparency).<br>
  21     <button type='submit'>Convert!</button>
  22     <br><br>
  23     <img id="img" onload="run_convert();"><canvas id="canvas"></canvas><span id="span"></span><br>
  24     (img / canvas/ imghtml)
  25     <br><br>
  26     Result:<br>
  27     <textarea id="textarea" rows="10" cols="80"></textarea>
  28 </form>
  29
  30
  31 <script>
  32 var img      = document.getElementById("img");
  33 var canvas   = document.getElementById("canvas");
  34 var span     = document.getElementById("span");
  35 var textarea = document.getElementById("textarea");
  36 var fill     = document.getElementById("fill");
  37 var fillRGB  = document.getElementById("fillRGB");
  38
  39 function start_convert() {
  40     try {
  41
  42         // Unhide stuff. They're initially hidden because the image shows a
  43         // broken-image icon on first page load, and the canvas defaults to a
  44         // large empty area.
  45         img.style.display    = "inline";
  46         canvas.style.display = "inline";
  47         span.style.display   = "inline-block";
  48
  49         // Clear out any previous values.
  50         textarea.value = "(loading image)"
  51         span.innerHTML = "";
  52
  53         // Get the image filename
  54         var input = document.getElementById("filepath");
  55         img.src = input.value;
  56
  57         // We're done, let the onload handler do the real work.
  58     } catch (e) {
  59         alert("Crap, start_convert failed: " + e);
  60     }
  61 }
  62
  63 function run_convert() {
  64     try {
  65         textarea.value = "(rendering canvas)";
  66
  67         canvas.width = img.width;
  68         canvas.height = img.height;
  69         var ctx = canvas.getContext("2d");
  70         ctx.clearRect(0, 0, img.width, img.height);
  71         if (fill.checked) {
  72             ctx.fillStyle = fillRGB.value;
  73             ctx.fillRect (0, 0, img.width, img.height);
  74         }
  75         ctx.drawImage(img, 0, 0);
  76
  77         // [r, g, b, a, r, g, b, a, ...]
  78         var pixels = ctx.getImageData(0, 0, img.width, img.height).data;
  79
  80         var imghtml = "<table cellpadding='0' cellspacing='0' width='" +
  81                        img.width + "' height='" + img.height + "'>\n";
  82
  83         for (var y = 0; y < img.height; y++) {
  84             imghtml += "<tr height='1'>\n";
  85
  86             textarea.value = "(converting row " + y + ")";
  87
  88             for (var x = 0; x < img.width; x++) {
  89                 var p = img.width * y * 4 + x * 4;
  90
  91                 var r = pixels[p + 0];
  92                 var g = pixels[p + 1];
  93                 var b = pixels[p + 2];
  94                 var a = pixels[p + 3];
  95
  96                 var alpha = (a / 255).toString();
  97                 alpha = alpha.substring(0, 6); // "0.12345678 --> 0.1234"
  98                 imghtml += "  <td width='1' style='background-color: " +
  99                                 "rgba(" +
 100                                 r + "," +
 101                                 g + "," +
 102                                 b + "," +
 103                                 alpha +
 104                                 ")'></td>\n";
 105             }
 106
 107             imghtml += "</tr>\n";
 108         }
 109
 110         imghtml += "</table>\n";
 111
 112         span.innerHTML = imghtml;
 113         textarea.value = "<html><body>\n" + imghtml + "</body></html>";
 114
 115     } catch (e) {
 116         alert("Crap, run_convert failed: " + e);
 117     }
 118 }
 119 </script>
 120
 121 </body>
 122 </html>