CanvasImageData object

Provides an object that can represent a rectangle of pixels of a given width and height in CSS pixels.

HTML Canvas 2D Context, Section 1

Members

The CanvasImageData object has these types of members:

Properties

The CanvasImageData object has these properties.

PropertyDescription

data

Gets the CanvasPixelArray object that contains image data for a given CanvasImageData object.

height

Gets the number of rows of physical device pixels in the CanvasImageData object.

width

Gets the number of physical device pixels in a row of the CanvasImageData object.

 

Standards information

Remarks

CanvasImageData represents a block of image data that you can use to manipulate canvas images. Using the getImageData method, you can return image data from a canvas. With the CanvasImageData object, you can access the image down to a pixel, and modify it using the RGBA format.

For an example that shows the CanvasImageData object in action for sampling and changing colors, see Sampling image colors with Canvas.

Note  If you are developing on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force a Windows Store app using JavaScript to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

Examples

The following code shows how to get a pixel on a canvas based on a mouse click. The code uses parseInt() to ensure that the x and y values are integers because a Windows Store app using JavaScript return mouse coordinates as floats to represent fractional pixels.

The example displays an image that when you click on a point on the photo, it takes the color in the imageData array and uses it to display a background. There are two conversion functions, one to convert a decimal to a hex, and the other to build a color string.

Photo of a cat with the a point clicked and the color in the data image array used for the background.

See the example in action.


<!DOCTYPE html>
<html>
<head>
<title>imageData example</title>
 
</head>
<body>
 <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
 <img id="pix" src="frankie1.jpg" />; 
 <div id="myDiv"></div>

  <script>
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");                // Get the context.
      var image = document.getElementById("pix");

      //  Do this once image loads

      image.addEventListener("load", function () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image, if it exists.
      var x = (canvas.width - image.width) / 2;
      var y = (canvas.height - image.height) / 2;
      ctx.drawImage(image, x, y);
      image.style.display = "none"; // remove original image
      },false);
    }

    canvas.addEventListener("click", function (evt) {
      //  get mouse coordinates from event parameter
      var mouseX = parseInt(evt.offsetX);
      var mouseY = parseInt(evt.offsetY);

      //  get imageData object from canvas
      var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);

      //  get pixelArray from imagedata object
      var data = imagedata.data;  

      //  calculate offset into array for pixel at mouseX/mouseY
      var i = ((mouseY * canvas.width) + mouseX) * 4;

      //  get RGBA values
      var r = data[i];        
      var g = data[i+1];
      var b = data[i+2];
      var a = data[i+3];
      var display = document.getElementById("myDiv");
      display.innerText = "Red: " + r + "  Green: " + g + "  Blue: " + b + "  Alpha: " + a;
      canvas.style.backgroundColor = getHex(data, i);
    },false);

    function getHex(data, i) {
      //  Builds a CSS color string from the RGB value (ignore alpha)
      return ("#" + d2Hex(data[i]) + d2Hex(data[i + 1]) + d2Hex(data[i + 2]));
    }

    function d2Hex(d) {
      // Converts a decimal number to a two digit Hex value
      var hex = Number(d).toString(16);
      while (hex.length < 2) {
        hex = "0" + hex;
      }
      return hex.toUpperCase();
    }

  </script>

</body>
</html> 


See also

CanvasRenderingContext2D
Sampling image colors with Canvas
getImageData

 

 

Show:
© 2014 Microsoft