使用canvas进行图像处理

使用canvas进行图像处理

canvas基础知识：MDN

主要知识点

1、canvas作为一个绘图面板，可以直接的获取图像的数据，进而对图像进行处理。

2、图像添加水印，缩放图像，放大镜效果。

3、像素级的处理，图像滤镜。（自己查阅算法来进行绚丽的变换，这部分是关键，找几个比较有意思的算法来试验一下）

4、计算机图像艺术。

canvas图像基础  drawImage()  

　　基础知识：

　　　　1、html:

　　　　2、Javascript:var canvas=document.getElementById('canvas');

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

　　canvas绘图接口:drawImage

　　　　语法:context.drawImage(image,dx,dy);

　　将图像放在画布当中的代码:

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8     
 9     您的浏览器尚不支持canvas
10     
11      27  28 

　　drawImage的参数:1、context.drawImage(image,dx,dy,dw,dh);可对图像进行缩放。

　　　　　　　　　　   2、对源图像进行操作，如下截图

　　　　　　　　　　  

 　　画布中心缩放图，使用滑杆元素与图像交互

　　

    您的浏览器尚不支持canvas   
    
     

离屏canvas，用于浮于原canvas上面

　　1、水印效果

　　2、放大镜效果

　　

　　

    览器尚不支持canvas
    
     

使用Canvas进行像素级操作

　　1、ImageData对象保存三个主要信息：

　　　　1、width

　　　　2、height　　

　　　　3、data

　　2、主要方法

　　　　1、getImageData(x,y,w,h);

　　　　2、putImageData(imageData,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH);

           3、createImageData(w,h);　　

    

        
        
        
        
    
    

    

        Grey Effect
        Black and White Effect
        Reverse Effect
        Blur Effect
        Mosaic Effect
        reverseImage Effect
    
     
    
     

 

转载于:https://www.cnblogs.com/changyangzhe/p/5836475.html