Canvas 图像怎么操作像素实现复古像素画转换-H5教程-PHP中文网

要让普通图片变成复古像素画效果，核心是重采样+颜色简化+像素块固化，通过canvas的getimagedata和putimagedata在浏览器端操作像素，实现低分辨率感、有限色盘和无抗锯齿三大特征。

canvas 图像怎么操作像素实现复古像素画转换

要让一张普通图片变成复古像素画效果，核心不是加滤镜、也不是调色，而是重采样 + 颜色简化 + 像素块固化。Canvas 提供的 getImageData 和 putImageData 是实现这一过程的底层支柱，整个流程完全在浏览器端完成，不依赖服务器。

复古像素画的关键特征

复古像素画（比如红白机、Game Boy 风格）有三个典型特点：

低分辨率感：画面被明显分割成大块方形单元，细节被舍弃
有限色盘：颜色数量极少（常为 4–16 色），且多为饱和度高、明暗对比强的色调
无抗锯齿/平滑过渡：边缘硬朗，没有渐变或模糊

这些不能靠 CSS 或简单缩放模拟，必须操作像素本身。

步骤一：获取并降采样原始像素

先用 drawImage 把图片画到 canvas 上，再用 getImageData(0, 0, width, height) 获取全部像素数据。
接着按目标像素尺寸（如 pixelSize = 8）遍历画布，每次跳 pixelSize 像素，提取一个“块”的代表色：

for (let y = 0; y <blockquote><p>⚠️ 注意：不要用平均色（虽然更柔和），复古风格偏好“取样点”色，更能还原老游戏机逐行扫描的粗粝感。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></blockquote><h3>步骤二：映射到复古色盘（颜色量化）</h3><p>拿到每个块的 RGB 后，不直接写回，而是把它“归入”预设的复古调色板。例如 Game Boy 的四色灰阶：<br><code>[[15, 56, 15], [48, 98, 48], [139, 172, 15], [155, 188, 15]]</code>（深绿、中绿、浅绿、亮绿）</p><p>计算方式：对每个候选色算欧氏距离 <code>√[(r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²]</code>，选最近的一个。<br>
也可以用查表法加速，提前建好 256×256×256 的映射 LUT（适合高频调用）。</p><h3>步骤三：填充像素块并禁用图像缩放插值</h3><p>把确定好的颜色，用 <code>fillRect(x, y, pixelSize, pixelSize)</code> 填满整个块区域。<br>
关键一步：确保 canvas 输出时<strong>不启用平滑缩放</strong>，否则导出或放大后会糊：</p><pre class="brush:js;toolbar:false;">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; // 必须设为 false！
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

这样即使后续用 CSS 放大显示，边缘也保持锐利像素风。