The CanvasRenderingContext2D
method getImageData()
of the Canvas 2D API returns an ImageData
object representing the underlying pixel data for a specified portion of the canvas.
This method is not affected by the canvas's transformation matrix. If the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned ImageData
object.
Note: Image data can be painted onto a canvas using the putImageData()
method.
You can find more information about getImageData()
and general manipulation of canvas contents in Pixel manipulation with canvas.
getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)
An ImageData
object containing the image data for the rectangle of the canvas specified. The coordinates of the rectangle's top-left corner are (sx, sy)
, while the coordinates of the bottom corner are (sx + sw - 1, sy + sh - 1)
.
This example draws an image, and then uses getImageData()
to grab a portion of the canvas.
We use getImageData()
to extract a slice of the image, starting at (10, 20)
, with a width of 80
and a height of 230
. We then draw this slice three times, positioning the slices progressively below and to the right of the last slice.
HTML
<canvas id="canvas" width="700" height="400"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "plumeria.jpg";
image.addEventListener("load", () => {
ctx.drawImage(image, 0, 0, 233, 320);
const imageData = ctx.getImageData(10, 20, 80, 230);
ctx.putImageData(imageData, 260, 0);
ctx.putImageData(imageData, 380, 50);
ctx.putImageData(imageData, 500, 100);
});
Result
The optional colorSpace
setting allows you to get image data in the desired format.
const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace);