The Tor Browser / file comparison
comparison: image/test/reftest/img2html.html
image/test/reftest/img2html.html
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:45d3e2166d19 |
|---|---|
| 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> |
