image/test/reftest/img2html.html@ac0c01689b40
image/test/reftest/img2html.html
Thu, 15 Jan 2015 15:59:08 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:59:08 +0100
- branch
- TOR_BUG_9701
- changeset 10
- ac0c01689b40
- permissions
- -rw-r--r--
Implement a real Private Browsing Mode condition by changing the API/ABI;
This solves Tor bug #9701, complying with disk avoidance documented in
https://www.torproject.org/projects/torbrowser/design/#disk-avoidance.
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>
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>
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");
39 function start_convert() {
40 try {
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";
49 // Clear out any previous values.
50 textarea.value = "(loading image)"
51 span.innerHTML = "";
53 // Get the image filename
54 var input = document.getElementById("filepath");
55 img.src = input.value;
57 // We're done, let the onload handler do the real work.
58 } catch (e) {
59 alert("Crap, start_convert failed: " + e);
60 }
61 }
63 function run_convert() {
64 try {
65 textarea.value = "(rendering canvas)";
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);
77 // [r, g, b, a, r, g, b, a, ...]
78 var pixels = ctx.getImageData(0, 0, img.width, img.height).data;
80 var imghtml = "<table cellpadding='0' cellspacing='0' width='" +
81 img.width + "' height='" + img.height + "'>\n";
83 for (var y = 0; y < img.height; y++) {
84 imghtml += "<tr height='1'>\n";
86 textarea.value = "(converting row " + y + ")";
88 for (var x = 0; x < img.width; x++) {
89 var p = img.width * y * 4 + x * 4;
91 var r = pixels[p + 0];
92 var g = pixels[p + 1];
93 var b = pixels[p + 2];
94 var a = pixels[p + 3];
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 }
107 imghtml += "</tr>\n";
108 }
110 imghtml += "</table>\n";
112 span.innerHTML = imghtml;
113 textarea.value = "<html><body>\n" + imghtml + "</body></html>";
115 } catch (e) {
116 alert("Crap, run_convert failed: " + e);
117 }
118 }
119 </script>
121 </body>
122 </html>
