Posted By

athanassiadis on 06/22/11


Tagged

textmate


Versions (?)

B


 / Published in: Other
 

  1. <div class="img-wrap">
  2. <img id="cvs-src" src="your-image.jpg" />
  3. <canvas width=500 height=500></canvas>
  4. </div>
  5.  
  6. <script>
  7. (function() {
  8. var supportsCanvas = !!document.createElement('canvas').getContext;
  9. supportsCanvas && (window.onload = greyImages);
  10.  
  11. function greyImages() {
  12. var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),
  13. img = document.getElementById("cvs-src"),
  14. imageData, px, length, i = 0,
  15. grey;
  16.  
  17. ctx.drawImage(img, 0, 0);
  18.  
  19. // Set 500,500 to the width and height of your image.
  20. imageData = ctx.getImageData(0, 0, 500, 500);
  21. px = imageData.data;
  22. length = px.length;
  23.  
  24. for ( ; i < length; i+= 4 ) {
  25. grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
  26. px[i] = px[i+1] = px[i+2] = grey;
  27. }
  28.  
  29. ctx.putImageData(imageData, 0, 0);
  30. }
  31. })();
  32. </script>
  33.  

Report this snippet  

You need to login to post a comment.