从像素到乐高：用Canvas打造乐高风图片

2023-10-09 13:05:26

引言

乐高积木以其多彩的塑料积木和无限的组合可能性而闻名。它不仅仅是一种玩具，更是一种艺术形式。受乐高积木的启发，本文将向您展示如何使用 Canvas 和 JavaScript 将普通图片转换成乐高风格的马赛克艺术品。

原理及实现

1. 获取图片像素

第一步是获取图片的像素点信息。我们可以使用 Canvas 的 getImageData() 方法来实现。该方法返回一个 ImageData 对象，其中包含了图片的像素数据。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
  context.drawImage(image, 0, 0);
  const imageData = context.getImageData(0, 0, image.width, image.height);
};
image.src = 'image.jpg';

2. 马赛克化

接下来，我们需要将图片马赛克化。我们可以通过遍历 ImageData 对象中的像素点，并根据每个像素点的颜色值将其分配到一个马赛克块中来实现。

const mosaicSize = 10;
const mosaicData = [];
for (let i = 0; i < imageData.data.length; i += 4) {
  const r = imageData.data[i];
  const g = imageData.data[i + 1];
  const b = imageData.data[i + 2];
  const color = `rgb(${r}, ${g}, ${b})`;
  const mosaicIndex = Math.floor(i / (4 * mosaicSize));
  if (!mosaicData[mosaicIndex]) {
    mosaicData[mosaicIndex] = [];
  }
  mosaicData[mosaicIndex].push(color);
}

3. 乐高块填充

最后，我们需要将马赛克块填充为乐高块图形。我们可以使用 Canvas 的 fillRect() 方法来实现。

for (let i = 0; i < mosaicData.length; i++) {
  const mosaicRow = mosaicData[i];
  for (let j = 0; j < mosaicRow.length; j++) {
    const color = mosaicRow[j];
    context.fillStyle = color;
    context.fillRect(j * mosaicSize, i * mosaicSize, mosaicSize, mosaicSize);
  }
}

4. 代码示例

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
  context.drawImage(image, 0, 0);
  const imageData = context.getImageData(0, 0, image.width, image.height);
  const mosaicSize = 10;
  const mosaicData = [];
  for (let i = 0; i < imageData.data.length; i += 4) {
    const r = imageData.data[i];
    const g = imageData.data[i + 1];
    const b = imageData.data[i + 2];
    const color = `rgb(${r}, ${g}, ${b})`;
    const mosaicIndex = Math.floor(i / (4 * mosaicSize));
    if (!mosaicData[mosaicIndex]) {
      mosaicData[mosaicIndex] = [];
    }
    mosaicData[mosaicIndex].push(color);
  }
  for (let i = 0; i < mosaicData.length; i++) {
    const mosaicRow = mosaicData[i];
    for (let j = 0; j < mosaicRow.length; j++) {
      const color = mosaicRow[j];
      context.fillStyle = color;
      context.fillRect(j * mosaicSize, i * mosaicSize, mosaicSize, mosaicSize);
    }
  }
};
image.src = 'image.jpg';