Copy pixel data with getImageData() and put image data back with putImageData() - Javascript Canvas Reference

Javascript examples for Canvas Reference:getImageData

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. getImageData

Description

Copy pixel data with getImageData() and put image data back with putImageData()

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="http://java2s.com/resources/c.png" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }//w w w .  ja  v a  2  s  . c  o  m
    ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>

Related Tutorials