SHARE
TWEET

xkcd-time_diff

a guest Mar 29th, 2013 1,143 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // How to use
  2. // Go to imgs.xkcd.com (it will show a 404 page, don't worry, it's normal)
  3. // Open your browser console
  4. // > I use the Firebug's console, since the standard Firefox console (Ctrl+Shift+K)
  5. //   gives me a security error when using document.write
  6. // Copy-paste the following code and execute it
  7. // You will see 2 (TWO) text fields and a button
  8. // Write the name of the images to check (only the hash part of the name) in the text fields
  9. // Click the button (sometimes you need to click twice, I don't know why)
  10. // You will see, in order, the first image, the second image, the difference between the two
  11. // Green pixels are pixels darker in the second image than in the first
  12. // Red pixels are pixels darker in the first image than in the second
  13.  
  14. document.write('\
  15. <html>\
  16. <head>\
  17. <script type="text/javascript" language="javascript">\
  18.  function diff() {\
  19.    var c1=document.getElementById("canvas1");\
  20.    var ctx1=c1.getContext("2d");\
  21.    var img1=new Image();\
  22.    img1.src="http://imgs.xkcd.com/comics/time/"+\
  23.             document.getElementById("a").value+\
  24.             ".png";\
  25.    ctx1.drawImage(img1,0,0);\
  26.    var imageData1 = ctx1.getImageData(0, 0, c1.width, c1.height);\
  27.    var data1 = imageData1.data;\
  28.    \
  29.    var c2=document.getElementById("canvas2");\
  30.    var ctx2=c2.getContext("2d");\
  31.    var img2=new Image();\
  32.    img2.src="http://imgs.xkcd.com/comics/time/"+\
  33.             document.getElementById("b").value+\
  34.             ".png";\
  35.    ctx2.drawImage(img2,0,0);\
  36.    var data2 = ctx2.getImageData(0, 0, c2.width, c2.height).data;\
  37.    \
  38.    var c3=document.getElementById("canvas3");\
  39.    var ctx3=c3.getContext("2d");\
  40.    var imageData = ctx3.getImageData(0, 0, c3.width, c3.height);\
  41.    var data3 = imageData.data;\
  42.    for(var i = 0, n = data1.length; i < n; i += 4) {\
  43.      var color1 = data1[i];\
  44.      \
  45.      var color2 = data2[i];\
  46.      \
  47.      data3[i] = color1==color2?color1:(color1<color2?0xFF:0x00);\
  48.      data3[i+1] = color1==color2?color1:(color1>color2?0xFF:0x00);\
  49.      data3[i+2] = color1==color2?color1:0x00;\
  50.      data3[i+3] = 0xFF;\
  51.    }\
  52.    \
  53.    ctx3.putImageData(imageData, 0, 0);\
  54. \
  55.  }\
  56. </script>\
  57. </head>\
  58. \
  59. <body>\
  60.  <input type="text" id="a" title="First hash" />\
  61.  <input type="text" id="b" title="Second hash" />\
  62.  <button onclick="diff()">Show differences</button>\
  63.  <br/>\
  64.  <canvas id="canvas1" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
  65.  <br/>\
  66.  <canvas id="canvas2" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
  67.  <br/>\
  68.  <canvas id="canvas3" width="553" height="395">Your browser doesn\'t support HTML5</canvas>\
  69. </body>\
  70. </html>\
  71. ');
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top