HTML Canvas Image invert image colors

Introduction

This code must be run on a web server due to security constraints with the getImageData() method.

To invert the color of an image using HTML5 canvas, loop through all of the pixels in an image and then invert each pixel using a color inverting algorithm.

To invert a pixel's color, we can invert each of its RGB components by subtracting each value from 255 as follows: 

data[i  ] = 255 - data[i  ]; // red 
data[i+1] = 255 - data[i+1]; // green 
data[i+2] = 255 - data[i+2]; // blue

Once the pixels have been updated, we can redraw the image using the putImageData() method of the canvas context: 

context.putImageData(imageData, destX, destY);

View in separate window 



<!DOCTYPE HTML>
<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                /*from  ww w .  j  av  a 2s .  c  o m*/
                var imageObj = new Image();
                imageObj.onload = function(){
                    var sourceWidth = this.width;
                    var sourceHeight = this.height;
                    var sourceX = canvas.width / 2 - sourceWidth / 2;
                    var sourceY = canvas.height / 2 - sourceHeight / 2;
                    var destX = sourceX;
                    var destY = sourceY;
                    
                    context.drawImage(this, destX, destY);
                    
                    var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
                    var data = imageData.data;
                    
                    for (var i = 0; i < data.length; i += 4) {
                        data[i] = 255 - data[i]; // red
                        data[i + 1] = 255 - data[i + 1]; // green
                        data[i + 2] = 255 - data[i + 2]; // blue
                        // i+3 is alpha (the fourth element)
                    }
                    
                    // overwrite original image with
                    // new image data
                    context.putImageData(imageData, destX, destY);
                };
                imageObj.src = "image1.png";
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>



PreviousNext

Related