前端图像处理指南（前端绘图技术canvas）

计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理，SVG矢量图和CSS3图像处理，重点是canvas，并且最后会附上一个小应用。

图像滤镜处理

现在的朋友圈发个图都要用滤镜美一下，复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息，这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息，然后用setImageData方法把新的数据重新绘制在canvas上，这样就可以实现图像滤镜打码加特效等一系列功能。

比如我们现在要实现一个复古滤镜:

// 复古滤镜处理算法：获取每个像素的RGB信息，并按特定权重返回其加权平均值

let sepiaFilter = function(imgData) {

  let d = imgData.data

  for (let i = 0; i < d.length; i += 4) {

    let r = d[i]

    let g = d[i + 1]

    let b = d[i + 2]

    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red

    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green

    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue

  }

  return imgData

}

//图像地址必须和当前页面同域，否则会报cross-origin错误 

img.src = '/img/logo@2x.png' 

img.onload = () => {

  ctx.drawImage(img, 0, 0) // 绘制原图

  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息

  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片

}