var output =document.createElement("canvas").getContext('2d').createImageData(input);
var w = input.width,
    h = input.height;
var iD = input.data,
    oD = output.data;
for(var y = 1; y < h - 1; y += 1) {
    for(var x = 1; x < w - 1; x += 1) {
        for(var c = 0; c < 3; c += 1) {
            var i = (y * w + x) * 4 + c;
            // 卷积核计算
            oD[i] = offset +(m[0] * iD[i - w * 4 - 4] + m[1] * iD[i - w * 4] + m[2] * iD[i - w * 4 + 4] +m[3] * iD[i - 4] + m[4] * iD[i] + m[5] * iD[i + 4] +m[6] * iD[i + w * 4 - 4] + m[7] * iD[i + w * 4] + m[8] * iD[i + w * 4 + 4]) /pisor;
        }
                    oD[(y * w + x) * 4 + 3] = 255; // 设置透明度为不透明
    }
}
return output;

}
//模糊处理
function mohu(){

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
var m = [1,1,1,1,1,1,1,1,1];
var output = ConvolutionMatrix(imageData, m, 10,0);
ctx1.putImageData(output,0,0);

}

//对比度处理
function level(){

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
var m = [0,0,0,0,3,0,0,0,0];
var output = ConvolutionMatrix(imageData, m, 1,-150);
ctx1.putImageData(output,0,0);

}

图片也可以有你想要的数据

既然图片每个像素都是由RGBA四个元素构成，单纯以图片来说用getImageData解析出来的只是一大堆你不必需要知道的数据，那么我们是不是可以把特定的色值看成我们自己的数据呢？
比如：在一张图片中，我们想把（r:255,g:255:b:255,a:255）白色像素找出来，可以通过getImageData来获取图片的数据，通过检索每个像素的数据是不是对应的rgba，把它们提取出来，再根据图片的宽度和高度，就可以计算出每个白色像素的位置信息，这些信息就是你想要提取的数据。

图片也需要做的好遍历些

在上一步中，我们已经知道了图片中特定元素获取相关位置信息的操作，但是图片是一个很普通的图片的话，你就需要遍历imageData中每个信息，有没有更好的方式减少遍历呢？
答案是：图片默认为黑色（r:0,g:0,b:0,a:0）就可以了，但不一定只有一个答案，或许也会有其他好的方法，但原理应该是一样的。
通过遍历每个像素的r,如果r!=0再去遍历这个像素的剩下的g,b,a,这一步比上一步剩下了无用的遍历，这一步中最重要的就是背景最好是黑色，因为黑色是全零状态，好计算。