I have been working with
Top obtain the pixels for a given image, you first have to draw that image on canvas and then get the pixels using the
getImageData method on canvas context.
var imageManipulationCanvas = document.createElement('canvas'); imageManipulationCanvas.height = image.height; imageManipulationCanvas.width = image.width; var imageManipulationCtx = imageManipulationCanvas.getContext('2d'); imageManipulationCtx.drawImage(image, 0, 0); // Draw image on temporary canvas var myImageData = imageManipulationCtx.getImageData(0, 0, image.width, image.height); // Parameters are left, top, width and height
The image data object has three fields:
data where data is the
CanvasPixelArray object which contains pixel data for image.
CanvasPixelArray object can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, “RGBA” format). Each color component is represented by an integer between 0 and 255. Each component is assigned a consecutive index within the array, with the top left pixel’s red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array.
height x width x 4 bytes of data, with index values ranging from
0 to (height x width x 4)-1.
Now you can manipulate the pixels as you want for any image. However for simple operations like resizing and cropping, I prefer using different variations of the drawImage function rather than manipulating the pixels myself. Here’s how to resize an image using drawImage:
var imageManipulationCanvas = document.createElement('canvas'); imageManipulationCanvas.width = newW; imageManipulationCanvas.height = newH; var imageManipulationCtx = imageManipulationCanvas.getContext('2d'); imageManipulationCtx.drawImage(that.image, 0, 0, resizeW, resizeH); // Draw resized image on temporary canvas var resizedImageDataURL = imageManipulationCanvas.toDataURL(); //get DataURL for cropped image return resizedImageDataURL; //DataURL can be directly used to make new image pbject by using image.src
And, the following for cropping an image:
var imageManipulationCanvas = document.createElement('canvas'); imageManipulationCanvas.height = newH; imageManipulationCanvas.width = newW; var imageManipulationCtx = imageManipulationCanvas.getContext('2d'); //use drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) imageManipulationCtx.drawImage(image, croppingDimensionX, croppingDimensionY, croppingDimensionW, croppingDimensionH, 0, 0, croppingDimensionW, croppingDimensionH); // Draw cropped image on temporary canvas var croppedImageDataURL = imageManipulationCanvas.toDataURL(); //get DataURL for cropped image return croppedImageDataURL;