canvas 滤镜处理基础篇（一）

canvas 做滤镜处理实现基本的美图效果
canvas 做图像处理的原理是什么呢？就是根据你要的效果对画布图像的rgba通道的值做处理
首先两个canvas画布，一个展示原始图像，另一个展示处理后的图像

```
<--html -->
<canvas id="canvasa" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
    你的浏览器不支持canvas
</canvas>

<canvas id="canvasb" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
    你的浏览器不支持canvas
</canvas>
<--js -->
var canvasa = document.getElementById("canvasa");
    var  contexta = canvasa.getContext("2d");
    var canvasb = document.getElementById("canvasb");
    var  contextb = canvasb.getContext("2d");
    var image = new Image();
    window.onload = function(){
   
        image.src = "./lugage.png";
        image.onload = function () {
   
            contexta.drawImage(image, 0 , 0 ,canvasa.width, canvasa.height);
            var url = canvasa.toDataURL(