使用JavaScript实现图片马赛克效果，让您的图片更具艺术感！

79 min read

使用js实现图片马赛克效果的主要思路是将图片分成小块，然后对小块进行处理，使其变得模糊。实现过程如下：

  1. 将图片加载到canvas画布中：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
}
  1. 对于每个小块进行处理：
function pixelate(x, y, size) {
  const imageData = ctx.getImageData(x, y, size, size);
  const data = imageData.data;
  const len = data.length;

  let r = 0, g = 0, b = 0;
  for (let i = 0; i < len; i += 4) {
    r += data[i];
    g += data[i + 1];
    b += data[i + 2];
  }
  r /= (len / 4);
  g /= (len / 4);
  b /= (len / 4);

  for (let i = 0; i < len; i += 4) {
    data[i] = r;
    data[i + 1] = g;
    data[i + 2] = b;
  }

  ctx.putImageData(imageData, x, y);
}
  1. 对整个画布进行马赛克处理：
function mosaic(size) {
  const w = canvas.width;
  const h = canvas.height;

  for (let y = 0; y < h; y += size) {
    for (let x = 0; x < w; x += size) {
      pixelate(x, y, size);
    }
  }
}
  1. 调用mosaic函数，传入块大小即可实现图片马赛克效果。
mosaic(10);

完整的代码如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  mosaic(10);
}

function mosaic(size) {
  const w = canvas.width;
  const h = canvas.height;

  function pixelate(x, y, size) {
    const imageData = ctx.getImageData(x, y, size, size);
    const data = imageData.data;
    const len = data.length;

    let r = 0, g = 0, b = 0;
    for (let i = 0; i < len; i += 4) {
      r += data[i];
      g += data[i + 1];
      b += data[i + 2];
    }
    r /= (len / 4);
    g /= (len / 4);
    b /= (len / 4);

    for (let i = 0; i < len; i += 4) {
      data[i] = r;
      data[i + 1] = g;
      data[i + 2] = b;
    }

    ctx.putImageData(imageData, x, y);
  }

  for (let y = 0; y < h; y += size) {
    for (let x = 0; x < w; x += size) {
      pixelate(x, y, size);
    }
  }
}