js如何实现图片像素化 3种像素滤镜创建马赛克艺术

function pixelate(image, pixelSize) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const width = image.width;
  const height = image.height;

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(image, 0, 0, width, height);

  const pixelWidth = Math.floor(width / pixelSize);
  const pixelHeight = Math.floor(height / pixelSize);

  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = pixelWidth;
  tempCanvas.height = pixelHeight;

  tempCtx.drawImage(image, 0, 0, pixelWidth, pixelHeight);

  ctx.clearRect(0, 0, width, height);
  ctx.imageSmoothingEnabled = false; // 关键：禁用平滑处理
  ctx.drawImage(tempCanvas, 0, 0, pixelWidth, pixelHeight, 0, 0, width, height);

  return canvas.toDataURL(); // 返回像素化后的图片DataURL
}

// 使用示例：
const img = document.getElementById('myImage');
const pixelSize = 10; // 像素块大小
const pixelatedImage = pixelate(img, pixelSize);

const newImg = document.createElement('img');
newImg.src = pixelatedImage;
document.body.appendChild(newImg);

function pixelateImageData(image, pixelSize) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const width = image.width;
  const height = image.height;

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(image, 0, 0, width, height);

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

  for (let y = 0; y < height; y += pixelSize) {
    for (let x = 0; x < width; x += pixelSize) {
      let r = 0, g = 0, b = 0;
      let count = 0;

      // 计算像素块内的平均颜色
      for (let py = y; py < y + pixelSize && py < height; py++) {
        for (let px = x; px < x + pixelSize && px < width; px++) {
          const pixelIndex = (py * width + px) * 4;
          r += data[pixelIndex];
          g += data[pixelIndex + 1];
          b += data[pixelIndex + 2];
          count++;
        }
      }

      r = Math.floor(r / count);
      g = Math.floor(g / count);
      b = Math.floor(b / count);

      // 将平均颜色填充到像素块
      for (let py = y; py < y + pixelSize && py < height; py++) {
        for (let px = x; px < x + pixelSize && px < width; px++) {
          const pixelIndex = (py * width + px) * 4;
          data[pixelIndex] = r;
          data[pixelIndex + 1] = g;
          data[pixelIndex + 2] = b;
        }
      }
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

// 使用示例：
const img = document.getElementById('myImage');
const pixelSize = 10; // 像素块大小
const pixelatedImage = pixelateImageData(img, pixelSize);

const newImg = document.createElement('img');
newImg.src = pixelatedImage;
document.body.appendChild(newImg);

// Fragment Shader
precision mediump float;

varying vec2 v_texCoord;
uniform sampler2D u_image;
uniform float u_pixelSize;
uniform vec2 u_resolution;

void main() {
  vec2 pixelCoord = vec2(floor(v_texCoord.x * u_resolution.x / u_pixelSize) * u_pixelSize,
                           floor(v_texCoord.y * u_resolution.y / u_pixelSize) * u_pixelSize);

  vec2 texCoord = pixelCoord / u_resolution;

  gl_FragColor = texture2D(u_image, texCoord);
}

const canvas = document.querySelector('canvas');
const dataURL = canvas.toDataURL('image/png'); // 可以选择不同的图片格式，如image/jpeg

// 创建一个链接元素，用于下载图片
const link = document.createElement('a');
link.href = dataURL;
link.download = 'pixelated_image.png'; // 设置下载文件名

// 模拟点击链接，触发下载
link.click();