Canvas图像处理

基础知识复习

• HTML
  <canvas id="canvas"></canvas>
• JS
  var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')

绘图

1. drawImage：context.drawImage(image,dx,dy)
   image对象和起点坐标

var image = new Image();
canvas.width = 1152;
canvas.height = 768;
image.src = 'img.jpg';
image.onload = function(){ //图片加载完成之后绘制
  context.drawImage(image,0,0)
}

会按照canvas的长宽自动截取

2. drawImage：context.drawImage(image,dx,dy,dw,dh)
   image对象和起点坐标和宽高
   context.drawImage(image,0,0,canvas.width,canvas.height)
   会进行缩放

3. drawImage：context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
   

   image.png
   可以对原图进行截取和缩放。

4. 可以利用第二种画法对目标图像进行动态放大和缩小来显示在画布上。

离屏Canvas

1. 定义：将第二个canvas中的内容加载到第一个canvas上。
2. 方法，先绘制一个canvas，例如水印，然后在目标canvas上利用drawImage第一个参数传入canvas对象，并设置位移。

  context.drawImage(watermarkCanvas,canvas.width-watermarkCanvas.width,
                    canvas.height-watermarkCanvas.height)

3. 放大镜效果
   思路：建立离屏canvas，显示放大的图片。用clip进行圆形剪裁。然后将离屏canvas贴在显示区域鼠标的位置上面。即可完成放大的操作。

像素级别处理

1. imageData = context.getImageData(x,y,w,h)
imageData中有width height data的相关信息
   context.putImageData(imageDara,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH)
   注意位移会有累加
   image.png
2. var imageData = context.getImageData(x,y,w,h);
var pixelData = imageData.data;
   存储了图像中所有的像素信息
   image.png
3. 图像处理示例

for(var i=0;i<canvas.width*canvas,height;i++){//遍历图像中所有像素点
  pixelData[4*i+0] = 0;//红色通道设为0
  pixelData[4*i+1] = 0;//绿色通道设为0
  pixelData[4*i+2] = 0;//蓝色通道设为0
}

不同的图像算法可以实现不同的图像滤镜。
灰度效果：

for(var i=0;i<canvas.width*canvas,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;
}

模糊滤镜：(模糊滤镜需要参考附近像素点的值，所以需要一份拷贝参考信息)

var imageData = context.getImageData(x,y,w,h);
var pixelData = imageData.data;

var tmpImageData = context.getImageData(x,y,w,h);
var temPixelData = imageData.data;//参考像素信息

for(var i=1;i<canvas.height-1;i++){//i行
  for(var j=1;j<canvas.width-1;j++){//j列
    var totalr = 0;
    var totalg = 0;
    var totalb = 0;
    for(var dx = -1;dx<=1;dx++){//遍历ij点周围八个点
      for(var dy = -1;dy<=1;dy++){
        var x = i+dx;
        var y = i+dy;
        var p = x*canvas.width+y;
        totalr +=  temPixelData[p*4+0];
        totalg +=  temPixelData[p*4+1];
        totalb +=  temPixelData[p*4+2]
      }
    }
    var p = i*canvas.width+j;
    pixelData[p*4+0] = totalr/9;//平均值
    pixelData[p*4+1] = totalg/9;
    pixelData[p*4+2] = totalb/9;
  }
}

4. createImageData可以创建imageData