canvas的图片处理-木庄网络博客

本文摘自PHP中文网，作者小云云，侵删。

Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

canvas对像素点实现基本的处理操作

// 获取像素点数据
var canvas = document.getElementById('CanvasElt');
var ctx = canvas.getContext('2d');
// 获取canvas中的像素信息，
//x 开始复制的左上角位置的 x 坐标。
//y 开始复制的左上角位置的 y 坐标。
//width 将要复制的矩形区域的宽度。
//heigh将要复制的矩形区域的高度。
var canvasData = ctx.getImageData(x, y, canvas.width, canvas.height);
// 写入像素信息
ctx.putImageData(canvasData, 0, 0);
获取到的canvasData对象包含下列成员，其中的data数组结构大概是这样的，一行一行存，然后一个列点一个列点存，每个点占4个下标，分别是RGBA呗，则对于坐标（x,y）（这里的y是下方正向），RGBA分别是data[(ywidth+x)4]，data[(ywidth+x)4+1]，data[(ywidth+x)4+2]，data[(ywidth+x)4+3]。能够获取到像素点，就能对像素点进行操作，最简单的就是灰度处理了，灰度处理有很多种方式最简单的方法就是把每个相位的r,g,b相加取平均数，再分别赋给r,g,b。
//灰度处理
function gray() {

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
for(var i = 0; i < imageData.data.length; i += 4) {
var avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
    imageData.data[i] = avg; // red
    imageData.data[i + 1] = avg; // green
    imageData.data[i + 2] = avg; // blue
    imageData.data[i + 3] = 255; //alpha
}
ctx1.putImageData(imageData, 0, 0);

}
像素取反：255 减去对应rgb的值，再赋值给原来的rgb；亮度调节：原来的rgb值随机的加减一个相同的随机数。那么想得到对比度变化的图片，或者模糊图片呢？卷积核：图片处理领域最常用的就是卷积核，所谓的矩阵的卷积，就是如下图显示的那样，当计算红色框中的数值的时候，分别先提取周围绿框中8个数字，然后与施加的那个矩阵中对应位置相乘，然后把各个乘积加在一起，就得到了最终的值了。
?
比如: (40 x 0)+(42 x 1)+(46 x 0)+ (46 x 0)+(50 x 0)+(55 x 0)+ (52 x 0)+(56 x 0)+(58 x 0)= 42 那怎么就能得到模糊的图片呢？图片的像素点和[1,1,1,1,1,1,1,1,1]的矩阵求卷积核，此时的像素点可能超过了255；所以再除以一个基数8；得到的图片就是加了模糊滤镜的图片；对比度呢，就是1.提高白色画面的亮度；2.让黑色更黑，降低最低亮度；可以求[0,0,0,0,3,0,0,0,0]的卷积核，同样的有可能超过255，再减去一个适合的基数150；现在需要一个卷积核的函数：函数第一个参数是 canvas上的 imageData 对象第二个参数是传入矩阵所对应的数组，如果是下面这样的矩阵 a b c d e f g h i 则传入第二个的参数应为 [a,b,c,d,e,f,g,h,i] 第三个参数是除数因子。第四个参数就是偏移量。
function ConvolutionMatrix(input, m, pisor, offset) {

阅读剩余部分