canvas图像处理
最近在慕课网看到一个canvas图像处理的教程，现在总结一下。 不多说其它了，开始说代码吧。 以下canvasA是原图的画布，canvasB是处理后的图像的画布 RGB通道过滤
RGB通道过滤
function filter(){
var imageData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
//Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
//跨域认为是被污染的
var pixelData = imageData.data;
for(var i=0; i<canvasB.width*canvasB.height; i++){
pixelData[4*i+0] = 0; //r
// pixelData[4*i+1] = 0; //g
pixelData[4*i+2] = 0; //b
}
contextB.putImageData(imageData,0,0,0,0,canvasA.width,canvasA.height);
}
可以看到其实就是获取了像素点时候，把需要过滤掉的颜色置零就可以了
灰度化
function greyEffect(){
var imageData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
var pixelData = imageData.data;
for(var i=0; i<canvasB.width*canvasB.height; i++){
var r = pixelData[4*i+0];
var g = pixelData[4*i+1];
var b = pixelData[4*i+2];
var grey = r*0.3 + g*0.59 + b*0.11;
pixelData[4*i+0] = grey;
pixelData[4*i+1] = grey;
pixelData[4*i+2] = grey;
}
contextB.putImageData(imageData,0,0,0,0,canvasA.width,canvasA.height);
}
就是通过一条算灰度的公式算出灰度值，然后把它赋给像素的rgb。
黑白二值化
function blackEffect(){
var imageData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
var pixelData = imageData.data;
for(var i=0; i<canvasB.width*canvasB.height; i++){
var r = pixelData[4*i+0];
var g = pixelData[4*i+1];
var b = pixelData[4*i+2];
var grey = r*0.3 + g*0.59 + b*0.11;
if( grey > 255 / 2){
v = 255;
}else{
v = 0;
}
pixelData[4*i+0] = v;
pixelData[4*i+1] = v;
pixelData[4*i+2] = v;
}
contextB.putImageData(imageData,0,0,0,0,canvasA.width,canvasA.height);
}
就是算出灰度后，判断一下灰度是否大于255/2。如果是就认为该点是亮色，置为白色，否则，置为黑色。
反色
function reverseEffect(){
var imageData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
var pixelData = imageData.data;
for(var i=0; i<canvasB.width*canvasB.height; i++){
var r = pixelData[4*i+0];
var g = pixelData[4*i+1];
var b = pixelData[4*i+2];
pixelData[4*i+0] = 255 - r;
pixelData[4*i+1] = 255 - g;
pixelData[4*i+2] = 255 - b;
}
contextB.putImageData(imageData,0,0,0,0,canvasA.width,canvasA.height);
}
就是把像素的rgb变成255-rgb，就得到了相反的颜色
模糊算法
function blurEffect(){
//临时保存样板
var tmpData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
var tmpPixelData = tmpData.data;
var imageData = contextA.getImageData(0,0,canvasA.width,canvasA.height);
var pixelData = imageData.data;
var blurR = 4; //模糊半径
var totalnum = (2*blurR+1)*(2*blurR+1); //参考的像素点
for(var i=blurR; i<canvasB.height-blurR; i++){
for(var j=blurR; j<canvasB.width-blurR; j++){
var totalr = 0, totalg = 0, totalb = 0;
for(var dx=-blurR; dx<=blurR; dx++){
for(var dy=-blurR; dy<=blurR; dy++){
var x = i + dx;
var y = j + dy;
var p = x*canvasB.width + y;
totalr += tmpPixelData[p*4+0];
totalg += tmpPixelData[p*4+1];
totalb += tmpPixelData[p*4+2];
}
}
pixelData[4*i+0] = totalr / totalnum;
pixelData[4*i+1] = totalg / totalnum;
pixelData[4*i+2] = totalb / totalnum;
}
}
contextB.putImageData(imageData,0,0,0,0,canvasA.width,canvasA.height);
}
这个算法比之前的复杂许多，原理就是获取当前像素点周围的像素的rgb的平均值赋给当前像素点。
边缘检测
1.roberts算子
function roberts(){
//获取像素点阵
var imageData = contextA.getImageData(0,0,canvasB.width,canvasB.height);
var pixelData = imageData.data;
//算法核心
for(var i = 0; i < canvasB.height-1; i++){
for(var j = 0; j < canvasB.width-1; j++){
//获取需要像素下标
var target = 4*(i*canvasB.width+j); //左上
var member1 = 4*(i*canvasB.width+j+1); //右上
var member2 = 4*((i+1)*canvasB.width+j); //左下
var member3 = 4*((i+1)*canvasB.width+j+1); //右下
for(var k = 0; k < 3; k++){
var gx = pixelData[target+k] - pixelData[member3+k];
var gy = pixelData[member1+k] - pixelData[member2+k];
var vc = Math.abs(gx) + Math.abs(gy);
pixelData[target+k] = vc;
}
}
}
contextB.putImageData(imageData,0,0,0,0,canvasB.width,canvasB.height);
}
这个算法更复杂了，什么阈值的我没看懂，没有用，发现效果还可以。
2.sobel算子
//sobel算子
function sobel(){
//获取像素点阵
var imageData = contextA.getImageData(0,0,canvasB.width,canvasB.height);
var pixelData = imageData.data;
var fImageData = contextA.getImageData(0,0,canvasB.width,canvasB.height);
var fData = fImageData.data; //拷贝pixelData
//旋转后的卷积核
var gxData = [
[1,0,-1],
[2,0,-2],
[1,0,-1]
];
var gyData = [
[1,2,1],
[0,0,0],
[-1,-2,-1]
];
//算法核心
for(var i = 1; i < canvasB.height-1; i++){
for(var j = 1; j < canvasB.width-1; j++){
//获取需要像素下标
var target = 4*(i*canvasB.width+j);
var gx = [0,0,0]; //r,g,b
var gy = [0,0,0];
for(var dx = -1; dx <= 1; dx++){
for(var dy = -1; dy <= 1; dy++){
var x = i + dx;
var y = j + dy;
var p = 4*(x*canvasB.width + y);
//rgb分别计算
for(var k = 0; k < 3; k++){
gx[k] += (fData[p+k] * gxData[dx+1][dy+1]);
gy[k] += (fData[p+k] * gyData[dx+1][dy+1]);
}
}
}
for(var k = 0; k < 3; k++){
var vc = Math.abs(gx[k]) + Math.abs(gy[k]);
pixelData[target+k] = vc;
}
}
}
contextB.putImageData(imageData,0,0,0,0,canvasB.width,canvasB.height);
}
效果：
