如何将【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对象中的值，从而改变了整个图象的颜色，再把它画出来。
这有什么用呢？对于要对像素进行的操作来说，这很方便。比如反色、去色等操作。
例子
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
draw(this);
};
function draw(img) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
img.style.display = 'none';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var invert = function() {
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
data[i + 1] = 255 - data[i + 1]; // green
data[i + 2] = 255 - data[i + 2]; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var grayscale = function() {
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var invertbtn = document.getElementById('invertbtn');
invertbtn.addEventListener('click', invert);
var grayscalebtn = document.getElementById('grayscalebtn');
grayscalebtn.addEventListener('click', grayscale);
}
invert()反色函数将RGB通道的值用255减去，grayscale()去色函数将RGB通道的值进行平均，从而使颜色变成灰色。
结果
点击grayscale按钮图片会变成灰色，点击invert按钮图片会反色。
可以把代码放进codepen里看看效果如何。
保存图片
canvas可以将画布保存成图片链接，图片链接可以用于标签或者下载。
canvas.toDataURL('image/png')
默认转换成的格式是png。
canvas.toDataURL('image/jpeg', quality)
也可以是别的图片格式。quality是图片品质，数值是0~1。0是最差的品质，1是最佳的品质。
也可以生成二进制对象：
canvas.toBlob(callback, type, encoderOptions)