HTML and CSS Reference
In-Depth Information
Listing 16-2.
Get/PutImageData
onload = function() {
var img = document.createElement("img");
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, 300, 300);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var c = (data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114) | 0;
data[i] = data[i + 1] = data[i + 2] = c;
}
ctx.putImageData(imageData, 0, 0);
};
img.src = "lenna.jpg";
};
In Figure
16-1
, you can see the kaleidoscopic image by self-copying a scaled-down image.
Figure 16-1.
DrawImage output
In Figure
16-2
you can see the gray-scaled image.
Figure 16-2.
ImageData output
