canvas学习和滤镜实现

最近学习了 html5 中的重头戏--canvas。利用 canvas，前端人员可以很轻松地、进行图像处理。其 api 繁多，这次主要学习常用的 api，并且完成以下两个代码：

1. 实现去色滤镜
2. 实现负色(反色)滤镜

欢迎入群：857989948 。it 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、ui 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。

1 了解 canvas？

1.1 什么是 canvas？

这个 html 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 api 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。

1.2 canvas 和 svg、vml 的区别？

<canvas> 标记和 svg 以及 vml 之间的一个重要的不同是，<canvas> 有一个基于 javascript 的绘图 api，而 svg 和 vml 使用一个 xml 文档来描述绘图。

2 canvas 绘图学习

大多数 canvas 绘图 api 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的getcontext()方法获得的一个“绘图环境”对象上。而<canvas>元素本身默认的宽高分别是 300px、150px。

2.1 canvas 绘制矩形

// 处理canvas元素
var c = document.queryselector("#my-canvas");
c.width = 150;
c.height = 70;

// 获取 指定canvas标签 上的context对象
var ctx = c.getcontext("2d");
ctx.fillstyle = "#ff0000"; // 颜色
ctx.fillrect(0, 0, 150, 75); // 形状

2.2 canvas 绘制路径

var c = document.queryselector("#my-canvas");
var ctx = c.getcontext("2d");
ctx.moveto(0, 0); // 开始坐标
ctx.lineto(200, 100); // 结束坐标
ctx.stroke(); // 立即绘制

2.3 canvas 绘制圆形

对于ctx.arc()这个接口，5 个参数是:(x,y,r,start,stop)。其中，x 和 y 是圆心坐标，r 是半径。

而start和stop的单位是弧度制。不是长度，也不是 °。

var c = document.queryselector("#my-canvas");
var ctx = c.getcontext("2d");
ctx.beginpath();
ctx.arc(95, 50, 40, 0, 2 * math.pi);
ctx.stroke();

2.4 canvas 绘制文字

var c = document.getelementbyid("mycanvas");
var ctx = c.getcontext("2d");
ctx.font = "30px arial";
ctx.filltext("hello world", 10, 50);

3 canvas 图像处理学习

3.1 常用 api 接口

关于图像处理的 api，主要有 4 个：

• 绘制图像： drawimage(img,x,y,width,height) 或 drawimage(img,sx,sy,swidth,sheight,x,y,width,height)
• 获取图像数据： getimagedata(x,y,width,height)
• 重写图像数据： putimagedata(imgdata,x,y[,dirtyx,dirtyy,dirtywidth,dirtyheight])
• 导出图像： todataurl([type, encoderoptions])

更详细的 api 和参数说明请看：canvas 图像处理 api 参数讲解

3.2 绘制图像

在此些 api 的基础上，我们就可以在canvas元素中绘制我们的图片。假设我们图片是./img/photo.jpg。

<script>
  window.onload = function () {
    var img = new image() // 声明新的image对象
    img.src = "./img/photo.jpg"
    // 图片加载后
    img.onload = function () {
      var canvas = document.queryselector("#my-canvas");
      var ctx = canvas.getcontext("2d");

      // 根据image大小，指定canvas大小
      canvas.width = img.width
      canvas.height = img.height

      // 绘制图像
      ctx.drawimage(img, 0, 0, canvas.width, canvas.height)
    }
  }
</script>

如下图所示，图片被画入了 canvas：

4 实现滤镜

这里我们主要借用getimagedata函数，他返回每个像素的 rgba 值。借助图像处理公式，操作像素进行相应的、数学运算即可。

什么是 rgba？

4.1 去色效果

去色效果相当于就是老旧相机拍出来的黑白照片。人们根据人眼的敏感程度，给出了如下公式：

gray = red * 0.3 + green * 0.59 + blue * 0.11

代码如下：

<script>
  window.onload = function () {
    var img = new image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.queryselector("#my-canvas");
      var ctx = canvas.getcontext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawimage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgdata.data.length / 4; ++i) {
        var red = imgdata.data[i * 4],
          green = imgdata.data[i * 4 + 1],
          blue = imgdata.data[i * 4 + 2];
        var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 计算gray
        // 刷新rgb，注意：
        // imgdata.data[i * 4 + 3]存放的是alpha，不需要改动
        imgdata.data[i * 4] = gray;
        imgdata.data[i * 4 + 1] = gray;
        imgdata.data[i * 4 + 2] = gray;
      }
      ctx.putimagedata(imgdata, 0, 0); // 重写图像数据
    }
  }
</script>

效果如下图所示：

4.2 负色效果

负色效果就是用最大值减去当前值。而 getimagedata 获得的 rgb 中的数值理论最大值是：255。所以，公式如下：

new_val = 255 - val

代码如下：

<script>
  window.onload = function () {
    var img = new image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.queryselector("#my-canvas");
      var ctx = canvas.getcontext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawimage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgdata.data.length / 4; ++i) {
        var red = imgdata.data[i * 4],
          green = imgdata.data[i * 4 + 1],
          blue = imgdata.data[i * 4 + 2];
        // 刷新rgb，注意：
        // imgdata.data[i * 4 + 3]存放的是alpha，不需要改动
        imgdata.data[i * 4] = 255 - imgdata.data[i * 4];
        imgdata.data[i * 4 + 1] = 255 - imgdata.data[i * 4 + 1];
        imgdata.data[i * 4 + 2] = 255 - imgdata.data[i * 4 + 2];
      }
      ctx.putimagedata(imgdata, 0, 0); // 重写图像数据
    }
  }
</script>

效果图如下：

本篇文章来自，引用、转载请指明出处。

查看更多知识，或者技术交流：请访问