img2html.html (3892B)
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>