如何将【canvas学习笔记八】像素操作成？
摘要：ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息。它包含以下可读属性： width canvas的宽度，单位是像素。 height canvas的高度，单位是像素。 data 一个Uint8Clampe
ImageData对象
ImageData对象包含了一个区域内的canvas的像素信息。它包含以下可读属性：
width
canvas的宽度，单位是像素。
height
canvas的高度，单位是像素。
data
一个Uint8ClampedArray的一维数组，包含了每个像素的RGBA值。
什么是Uint8ClampedArray？这个数组里的数值是8位的整型，而且值得范围在0和255之间。任何不在[0, 255]之间的数都会变成[0, 255]之间最接近的那个整型数。
0到255之间，那记录的自然是RGBA颜色数值啦。这个data数组是这样排列的，data[0]是第一排第一列的像素R通道的数值，data[1]第一排第一列的像素G通道的数值，data[3]是第一排第一列的像素的Alpha通道的数值。而data[4]是第一排第二列的像素的R通道数值，以此类推。
比如说，第50排第200列的像素的蓝色通道的值：
blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
另外，data也有length属性，就是data数组的长度。
创建ImageData对象
有两种方法创建ImageData：
var myImageData = ctx.createImageData(width, height);
var myImageData = ctx.createImageData(anotherImageData);
注意啦，方法二是不会把data属性复制过去的，仅仅是复制了宽度和高度，data数组里的像素信息都是透明黑的，也就是都是0。
获取像素信息
可以用getImageData()方法获取像素信息。
var myImageData = ctx.getImageData(left, top, width, height);
top和left就是所截取的画布部分的左上角坐标。
Tip：
超过画布区域返回的像素信息都是透明黑，也就是都是0。
例子
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
ctx.drawImage(img, 0, 0);
img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +
', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);
结果
鼠标滑过就会显示rgba值。
绘制像素
ctx.putImageData(myImageData, dx, dy);
这个方法可以传入一个ImageData对象，然后把ImageData对象中的像素信息都画出来。dx, dy是绘制的左上角坐标。
比如我们可以逐一改变ImageData对象中的值，从而改变了整个图象的颜色，再把它画出来。
这有什么用呢？对于要对像素进行的操作来说，这很方便。比如反色、去色等操作。