Canvas图像处理

2017-04-13

Canvas图像处理能力，主要是依赖ImageData 对象，该对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：width，图片宽度；height，图片高度，单位均是像素；data，Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。

最关键的就是这个data属性，它里面包含图像的初始像素数据，且是可以更改的。它是一个类型化数组，按照rgba的色彩模型，每4项描述一个像素点的色彩信息。举个例子：

[255,0,0,0,0,255,0,0,0,0,255,0]

为了易于理解，我们假设这个图像只有3个像素点。上面的数组，按照rgba的顺序，那么第一个像素点的色彩信息是rgba(255，0，0，0)，即是红色。其它两个像素，依次是绿色和蓝色。

关于ImageData对象，就不再啰嗦了。详细信息请参考ImageData

一个简单的示例

<canvas id="canvas" width="300" height="300"></canvas>

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

var img = new Image();
img.src = 'canvas-download.png';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';

  setTimeout(function() {
    fill(255, 100, 0)
  }, 2000)
};
/**
 * 填充颜色，rgb 色彩模型
 * @param  {number} r 红色
 * @param  {number} g 绿色
 * @param  {number} b 蓝色
 */
function fill(r, g, b) {
  var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = pixels.data;
  for (var i = 0, len = data.length; i < len; i += 4) {
    data[i] = r
    data[i + 1] = g
    data[i + 2] = b
  }
  ctx.putImageData(pixels, 0, 0)
}

该示例极其简单，主要表达Canvas图像处理的原始思路。更多图像处理的算法，我也不擅长，请自行查找。

注：需要在http协议下访问页面