HTML Canvas Image get image data

Security

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

In order to access image data, use the getImateData() method on a non-web server file system.

We cannot access image data from an image on a different domain.

RGB

RGB represents the red, green, and blue components of a pixel's color.

Each component is an integer between 0 and 255.

0 represents no color and 255 represents full color.

RGB values are often times represented as follows: 

rgb(red,green,blue)

Here are some common color values represented with the RGB color model: 

rgb(0,0,0) = black 
rgb(255,255,255) = white 
rgb(255,0,0) = red 
rgb(0,255,0) = green 
rgb(0,0,255) = blue 
rgb(255,255,0) = yellow 
rgb(255,0,255) = magenta 
rgb(0,255,255) = cyan

In addition to RGB, pixels can also have an alpha channel.

The alpha channel refers to its opacity.

An alpha channel of 0 is a fully transparent pixel.

An alpha channel of 255 is a fully opaque pixel.

RGBA color space simply refers to the RGB color model (RGB) plus the alpha channel (A).

Do not confuse the alpha channel range of HTML5 canvas pixels, which are integers 0 to 255, and the alpha channel range of CSS colors, which are decimals 0.0 to 1.0.

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 a  v  a  2s  .c om
                var imageObj = new Image();
                imageObj.onload = function(){
                    var sourceWidth = this.width;
                    var sourceHeight = this.height;
                    var destX = canvas.width / 2 - sourceWidth / 2;
                    var destY = canvas.height / 2 - sourceHeight / 2;
                    var sourceX = destX;
                    var sourceY = destY;
                    
          // draw image on canvas
                    context.drawImage(this, destX, destY);
                    
          // get image data from the rectangular area 
          // of the canvas containing the image
                    var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
                    var data = imageData.data;
          
          // write out the image data properties
                    var str = "width=" + imageData.width + ", height=" + imageData.height + ", data length=" + data.length;
                    context.font = "12pt Calibri";
                    context.fillText(str, 4, 14);
                };
                imageObj.src = "image1.png";
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

The code draws an image, gets its image data, and then writes out the image data properties to the screen.

We can get the image data using the getImageData() method of the canvas context: 

context.getImageData(sourceX,sourceY,sourceWidth,sourceHeight);

The getImageData() method only works with the canvas context and not the image object itself.

In order to get image data, we must first draw an image onto the canvas and then use getImageData() method of the canvas context.

The ImageData object contains three properties: width, height, and data.




PreviousNext

Related