canvas图片处理

canvas图片处理运用
对于canvas来说，主要是两个方法对图片处理比较重要，一个是通过html5 canvas的 getImageData 方法获取图片的像素信息，可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息，可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。

1、获取canvas调用

var c = document.createElement('canvas');
context = c.getContext('2d');

2、获取导入图像信息

var hiddenImage = new Image();
hiddenImage.src=图片地址
 context .drawImage(hiddenImage, 0, 0, width, height);
   hiddenImage .onload=function(){
    context.putImageData(hiddenImage, 0, 0);
}

3、获取图片的像素信息

var imageData = context.getImageData(0, 0, w, h);

//注意这个获取的是数组，注意每1个像素由数组的4个元素组成，四个元素分别代码四个通道r/g/b/a的值

for(var j=0;j<hiddenImage.height;j+=1){
  for(var i=0;i<hiddenImage.width;i+=1){
//注意这里获取图片信息后可以进行定制化处理
    offset=4*(hiddenImage.width*j+i);
    var red = sourceImageData[offset];
    var green = sourceImageData[offset + 1];
    var blue = sourceImageData[offset + 2];
    var brightness = getBrightness(red,green,blue);
  }
}
function getBrightness(r,g,b){
      return 0.3*r + 0.59*g + 0.11*b;
}

4、导出处理过的图片

context.putImageData(第三步处理过得像素信息,0,0);