HTML canvas getImageData() Method invert the color

Introduction

Use getImageData() to invert the color of every pixels of an image on the canvas:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="image1.png" alt="the circle" width="100" height="100">
<canvas id="myCanvas" width="220" height="100" 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;//from  w w  w.  j  av  a  2 s  .c o  m
  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;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>



PreviousNext

Related