如何通过HTML5 Canvas先缩后放图像实现像素化低画质效果

核心逻辑是通过内存临时画布完成两次缩放操作，通过控制画布的抗锯齿开关就能切换像素化/轻微模糊两种效果，和Photoshop的缩放效果完全一致。

实现步骤 #

• 准备原始图像资源、一个展示用的正式画布，再创建两个不需要插入DOM的临时画布用于内存中转
• 定义缩小比例参数：比例越小最终效果的低画质感越强，常规可以取0.1~0.5之间的数值，比如设为0.25代表先缩小到原尺寸的1/4
• 第一次绘制：将原始图像按缩小比例绘制到第一个小尺寸临时画布上
• 第二次绘制：将小尺寸临时画布的内容按原尺寸比例放大，绘制到最终展示用的画布上，此时通过调整imageSmoothingEnabled属性切换效果：
  • 设为false：关闭抗锯齿，得到硬边缘像素化效果
  • 设为true：开启抗锯齿，得到轻微模糊的柔化低画质效果

可运行核心代码 #

// 假设已经获取到原始图片对象img，展示画布ctx为最终输出上下文
const imgWidth = img.naturalWidth;
const imgHeight = img.naturalHeight;
// 缩小比例，可自行调整
const scale = 0.25;

// 创建临时缩小用画布
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = imgWidth * scale;
tempCanvas.height = imgHeight * scale;
// 先把原图缩小绘制到临时画布
tempCtx.drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);

// 绘制到最终输出画布
// 调整抗锯齿属性控制效果
ctx.imageSmoothingEnabled = false; // 要模糊效果就改成true
ctx.drawImage(tempCanvas, 0, 0, imgWidth, imgHeight);

注意事项 #

• 所有绘制操作需要在原始图片加载完成后触发，可以绑定img.onload事件执行逻辑
• 如果使用外部图片需要配置跨域允许，否则canvas会被污染无法操作
• 临时画布全程在内存中运行，不会影响页面布局，性能开销极低

内容的提问来源于stack exchange，提问作者awnine