js canvas实现简单的图像扩散效果

JS Canvas 实现简单的图像扩散效果可以通过以下步骤来实现：

1. 准备工作

首先，在 HTML 文件中添加一个 canvas 元素，并为其设置习惯的宽高属性。然后，获取该元素的上下文和图片资源，以备后续使用。

<canvas id="canvas" width="600" height="400">
  Your browser does not support the HTML canvas tag.
</canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'img/image.jpg';
</script>

2. 绘制原始图片

接着，我们需要使用 ctx.drawImage() 方法将原始的图片绘制到 canvas 上：

img.onload = () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

3. 实现扩散效果

然后，我们需要在 canvas 的每一个像素上进行操作，将其颜色值向外扩散。具体地，我们可以使用 Canvas API 中的 ctx.getImageData() 方法获取一个 ImageData 对象，该对象包含了当前绘制区域的在屏幕上的工位点详细的像素信息，包含每个像素的颜色信息。

接着，我们对每个像素所在坐标点进行遍历，并且计算该点周围像素的像素值平均值，然后将该点的像素值设置为该平均值。最后使用 ctx.putImageData() 方法将处理后的像素数据重新显示到 canvas 上。

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;

for (let i = 0; i < pixels.length; i += 4) {
  const r = pixels[i];
  const g = pixels[i + 1];
  const b = pixels[i + 2];

  // 缩小范围，取周围9个像素的平均值
  const radius = 9;
  for (let ix = -radius; ix <= radius; ix++) {
    for (let iy = -radius; iy <= radius; iy++) {
      const x = ix + Math.floor(i / 4) % canvas.width;
      const y = iy + Math.floor(i / 4) / canvas.width;
      if (x > 0 && y > 0 && x < canvas.width && y < canvas.height) {
        const currentIndex = (i + ix * 4 + iy * canvas.width * 4);
        pixels[currentIndex] = (r + pixels[currentIndex]) / 2;
        pixels[currentIndex + 1] = (g + pixels[currentIndex]) / 2;
        pixels[currentIndex + 2] = (b + pixels[currentIndex]) / 2;
      }
    }
  }
}

// 计算完成后，将数据应用到 canvas 上
ctx.putImageData(imageData, 0, 0);

示例

以下是一个简单的示例：JSFiddle链接

<canvas id="canvas" width="600" height="400">
  Your browser does not support the HTML canvas tag.
</canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'https://picsum.photos/id/1005/600/400';

  img.onload = () => {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;

    for (let i = 0; i < pixels.length; i += 4) {
      const r = pixels[i];
      const g = pixels[i + 1];
      const b = pixels[i + 2];

      const radius = 9;
      for (let ix = -radius; ix <= radius; ix++) {
        for (let iy = -radius; iy <= radius; iy++) {
          const x = ix + Math.floor(i / 4) % canvas.width;
          const y = iy + Math.floor(i / 4) / canvas.width;
          if (x > 0 && y > 0 && x < canvas.width && y < canvas.height) {
            const currentIndex = (i + ix * 4 + iy * canvas.width * 4);
            pixels[currentIndex] = (r + pixels[currentIndex]) / 2;
            pixels[currentIndex + 1] = (g + pixels[currentIndex]) / 2;
            pixels[currentIndex + 2] = (b + pixels[currentIndex]) / 2;
          }
        }
      }
    }

    ctx.putImageData(imageData, 0, 0);
  }
</script>

你也可以将 radius 的值调整为其他的值，看看效果会发生什么变化。

另一个示例可以在 CodePen上查看。