利用canvas处理图片像素

利用canvas处理图片像素

1、学习getImageData功能

getImageData方法会返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。我们要对其做像素处理，是不可或缺的一部分

ImageData有如下符合规范标准的属性。

ImageData.data
只读。是一个包含RGBA像素信息的Uint8ClampedArray，数组中所有的值都是整数，范围是0~255。

ImageData.height
只读。是无符号长整数，表示ImageData对应的实际像素高度。

ImageData.width
只读。是无符号长整数，表示ImageData对应的实际像素宽度。

2、如何应用getImageData功能

介绍完了Api的使用，接下来可以看下在代码中是如何操作的

// 对图像做散点处理
var context = canvas.getContext('2d');
// x: 图像在画布中x坐标
// y: 图像在画布中y坐标 - 左上角顶点为坐标原点
// imgWidth：图像宽度
// imgHeight：图像高度
// 获取像素值
var imageData = this.context.getImageData(x, y, imgWidth, imgHeight);
funciton getPixels(height, width) {
    let pos = 0;
    const pixels = [];
    const data = this.imageData.data; //RGBA的一维数组数据
    //想要处理图像得部分
    for (let i = 1; i <= height; i++) {
      for (let j = 1; j <= width; j++) {
        pos = ((i - 1) * width + (j - 1)) * 4; //取得像素位置
        if (data[pos] >= 0) {
          const pixel = {
            x: x + j + Math.floor(Math.random() * 1.1), //重新设置每个像素的位置信息
            y: y + i + Math.floor(Math.random() * 1.1), //重新设置每个像素的位置信息
            fillStyle:
              'rgba(' +
              data[pos] +
              ',' +
              data[pos + 1] +
              ',' +
              data[pos + 2] +
              ',' +
              data[pos + 3] +
              ')',
          };
          pixels.push(pixel);
        }
      }
    }
    // 清除画布
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    const len: number = pixels.length;
    let curr_pixel = null;
    // 将处理好的数控，重新填充渲染
    for (let i = 0; i < len; i++) {
      curr_pixel = pixels[i];
      context.fillStyle = curr_pixel.fillStyle;
      context.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
    }
  }