图像的处理

一、绘制图片的方法

drawImage(image,x,y)	在canvas中(x,y)处绘制图片
drawImage(image,x,y,width,height)	在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height)	从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

canvas绘制图像有几个需要注意的地方

1、需要先实例化一个img对象，
2、通过img对象的src属性来引入外部图片
3、绘制图片语句必须在图片预加载完成后进行，不然有时候画不上去

    
        
        
        
    
    
        您的浏览器不支持canvas
    
    

二、像素

我们将图片画上去之后，可以利用上下文的getImageData()来获取指定区域的像素值，得到一个对象ImageData,ImageData有三个属性：width，height，data

    
        
        
        
    
    
        您的浏览器不支持canvas
    
    

图片.png

width和height表示访问像素区域大小
data是一个包含访问区域所有像素信息的属性

我们不仅可以获取像素，还可以绘制像素

绘制像素我们用putImageData(imageData,x,y);

    
        
        
        
    
    
        您的浏览器不支持canvas
    
    

图片.png

三、灰度处理

    
        
        
        
    
    
        您的浏览器不支持canvas
    
    

图片.png

imageData.data.length是获取到的像素点的个数，根据我们的rgba取值，imageData.data[i]表示红色r，imageData.data[i+1]表示绿色g，imageData[i+2]表示蓝色b，imageData.data[i+3]表示透明度a，我们去r、g、b三者的平均值来得到灰色。
正如上面代码中的写法

我们再补充一个，大家知道怎么取颜色的反色吗？
反色就是将255-原来的rgb值，得到新的rgb值，就能得到反色，利用这种方法没我们也可以将图片进行反色处理

    
        
        
        
    
    
        您的浏览器不支持canvas
    
    

得到效果如图

图片.png

四、canvas 对图形的存储

1、canvas.toDataURL()方>法返回一个包含图片展示的所有信息，参数可忽略
2、如果画布的宽度或高度为0，那么返回字符串“data:,”
3、返回值以“data:image/png,base64”开头，说明该方法已经将图片转化为base64格式，返回值类型是string类型。

下面我写个测试，在点击按钮时会在画布上画一个一模一样的图形

    
        
        
        
    
    
        
        点击
    
    

图片.png

打印出来的图片信息如下

图片.png

我们可以直接将该data信息复制到浏览器的地址栏打开

图片.png