Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // How to use
- // Go to imgs.xkcd.com (it will show a 404 page, don't worry, it's normal)
- // Open your browser console
- // > I use the Firebug's console, since the standard Firefox console (Ctrl+Shift+K)
- // gives me a security error when using document.write
- // Copy-paste the following code and execute it
- // You will see 2 (TWO) text fields and a button
- // Write the name of the images to check (only the hash part of the name) in the text fields
- // Click the button (sometimes you need to click twice, I don't know why)
- // You will see, in order, the first image, the second image, the difference between the two
- // Green pixels are pixels darker in the second image than in the first
- // Red pixels are pixels darker in the first image than in the second
- document.write('\
- <html>\
- <head>\
- <script type="text/javascript" language="javascript">\
- function diff() {\
- var c1=document.getElementById("canvas1");\
- var ctx1=c1.getContext("2d");\
- var img1=new Image();\
- img1.src="http://imgs.xkcd.com/comics/time/"+\
- document.getElementById("a").value+\
- ".png";\
- ctx1.drawImage(img1,0,0);\
- var imageData1 = ctx1.getImageData(0, 0, c1.width, c1.height);\
- var data1 = imageData1.data;\
- \
- var c2=document.getElementById("canvas2");\
- var ctx2=c2.getContext("2d");\
- var img2=new Image();\
- img2.src="http://imgs.xkcd.com/comics/time/"+\
- document.getElementById("b").value+\
- ".png";\
- ctx2.drawImage(img2,0,0);\
- var data2 = ctx2.getImageData(0, 0, c2.width, c2.height).data;\
- \
- var c3=document.getElementById("canvas3");\
- var ctx3=c3.getContext("2d");\
- var imageData = ctx3.getImageData(0, 0, c3.width, c3.height);\
- var data3 = imageData.data;\
- for(var i = 0, n = data1.length; i < n; i += 4) {\
- var color1 = data1[i];\
- \
- var color2 = data2[i];\
- \
- data3[i] = color1==color2?color1:(color1<color2?0xFF:0x00);\
- data3[i+1] = color1==color2?color1:(color1>color2?0xFF:0x00);\
- data3[i+2] = color1==color2?color1:0x00;\
- data3[i+3] = 0xFF;\
- }\
- \
- ctx3.putImageData(imageData, 0, 0);\
- \
- }\
- </script>\
- </head>\
- \
- <body>\
- <input type="text" id="a" title="First hash" />\
- <input type="text" id="b" title="Second hash" />\
- <button onclick="diff()">Show differences</button>\
- <br/>\
- <canvas id="canvas1" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
- <br/>\
- <canvas id="canvas2" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
- <br/>\
- <canvas id="canvas3" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
- </body>\
- </html>\
- ');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement