canvas三 图像处理

1.drawImage

(1)var image=new Image();

image.src="";

image.onload=function(){

cxt.drawImage(image,0,0,[dw],[dh]);

}

(2)渲染图像

cxt.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

(3)h5滑动杆元素

<input type="range"/>

min="",max="",step="",value=""

2.添加水印

采用离屏canvas，把第二个canvas绘制在第一个canvas中

drawImage(waterMarkCanvas,dx,dy)

3.canvas实现图片放大镜功能

canvas.getBoundingClientRect()获取canvas距离屏幕的相关属性

cxt.clip()

4.canvas进行像素级处理

imageData=cxt.getImageData(x,y,w,h) //获取像素，imageData包括width,height,data全部信息

cxt.putImageData(imageData,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH) //dirty的xy是累加

5.imageData.data存储像素信息，四个一组（r,g,b,p）

6.滤镜效果

灰度滤镜：一个点灰度的计算方法：r*0.3+g*0.59+b*0.11(图像学公式)，使每个点的r,g,b值均为灰度值，则实现灰度滤镜

黑白滤镜：或者rgb为全0，或者rgb为全255，设置阈值，进行手动设置即可

反色滤镜：图像上每个点的值设置为255-origin

模糊滤镜：需要参考自己周围的像素

马赛克滤镜：整块中像素使用平均值

扩展：人脸识别等

7.创建imageData

imageData=cxt.creatImageData(w,h)