canvas实现图片像素化（可调整像素大小、替换图片）

实现效果：通过调整像素大小实现图片像素化效果，也可以对图片进行替换

案例1：

案例2：

实现图片转像素画的关键点

• 获取像素数据：通过 Canvas 的 getImageData 方法获取图片的像素数据。这个方法会返回一个包含图片所有像素信息的对象。
• 像素化算法：实现像素化效果的核心是对图片的像素进行处理。通常会将图片分成若干小块，然后计算每块的平均颜色，并将这块区域的所有像素设置为这个平均颜色。
• 绘制像素化图片：将处理后的像素数据重新绘制到 Canvas 上，生成像素化效果的图片。

像素化处理函数

 const pixelate = (
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  pixelSize: number
) => {
   
  // 从画布捕获图像数据
  const imageData = ctx.getImageData(0, 0, width, height);
  // 包含像素数据（RGBA 值）的数组
  const data = imageData.data;
  for (let y = 0; y < height; y += pixelSize) {
   
    for (let x = 0; x < width; x += pixelSize) {
   
      // 对于每个像素块，提取左上角像素的颜色。
      const red = data[(width * y + x) * 4];
      const green = data[(width * y + x) * 4 + 1];
      const blue = data[(width * y + x) * 4 + 2];
      // 使用该颜色填充像素块
      ctx.fillStyle = `rgb(${
     red},${
     green},${
     blue})`;
      ctx.fillRect(x, y, pixelSize, pixelSize);
    }
  }
};

🔍Canvas的基本介绍与使用

全部代码（案例1）：

<template>
  <div class="p-30">
    <div class="item-wrap mb-12">
      像素大小
      <el-slider
        v-show="imgUrl"
        v-model="pixelSize"
        style="width:50%"
        :min="2"
        :max="50"
      />
    </div>
    <div class="item-wrap">
      <el-image v-show="imgUrl" :src="imgUrl" fit="cover" class="w-600 h-400" />
      <canvas ref="canvas"></canvas>
    </div>
  </div>
</template>
<script setup lang="ts">
// 像素大小
const pixelSize = ref(10);
const rawFile = ref();
const canvas = ref<HTMLCanva