html5实现像素化推荐缩放法：先将原图绘制到小尺寸canvas并关闭imageSmoothingEnabled，再拉伸显示；需整数倍缩放以保证像素对齐；手动操作getImageData适用于精确控制像素块颜色，但要注意跨域和性能问题。
html5 本身没有直接的“像素化”滤镜 API，但用 canvas + getImageData + putImageData 可以手动实现——关键不在“加滤镜”，而在“降采样再上采样”。
用 canvas 缩放再拉伸实现快速像素化
这是最轻量、兼容性最好、也最常用的方法：先将原图绘制到小尺寸 canvas，再用大尺寸 canvas 拉伸显示。浏览器默认使用双线性插值，所以要关掉它才能得到硬边像素块。
实操要点：
- 设置目标 canvas 的
ctx.imageSmoothingEnabled = false（chrome/firefox/edge 均支持） - 先用
drawImage把原图缩放到小尺寸（如 32×32），再 draw 到大 canvas 上 - 像素块大小 = 原图宽高 ÷ 缩放后宽高，比如原图 640×480 → 缩到 64×48，则每块像素是 10×10
- 注意：缩放比例必须是整数倍才保证像素对齐；非整数倍时边缘可能模糊或错位
const canvas = document.getElementById('pixelCanvas'); const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = false; // 假设 img 已加载完成 const pixelSize = 16; const smallWidth = Math.floor(img.width / pixelSize); const smallHeight = Math.floor(img.height / pixelSize);
// 绘制到小画布（内存中） const tempCanvas = document.createElement('canvas'); tempCanvas.width = smallWidth; tempCanvas.height = smallHeight; const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(img, 0, 0, smallWidth, smallHeight);
// 拉伸回原尺寸（开启像素化） canvas.width = img.width; canvas.height = img.height; ctx.drawImage(tempCanvas, 0, 0, smallWidth, smallHeight, 0, 0, img.width, img.height);
用 getImageData 手动取样做精确像素化
当需要控制每个像素块的颜色来源（比如取平均值、中位数、左上角值），或想做动态像素粒度调节时，就得操作像素数据。性能比缩放法低，但更可控。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' —— 图片跨域未处理，务必在 img 上加 crossOrigin="anonymous" 属性。
实操要点：
- 先用
drawImage把图片画到 canvas（同域或已配 CORS） - 调用
ctx.getImageData(0, 0, w, h)获取Uint8ClampedArray - 遍历像素，按
pixelSize步长取样，把每个块的左上角颜色（或计算出的颜色）填满整个块 - 注意：RGBA 数据是每 4 个字节一组（R,G,B,A），索引为
(y * width + x) * 4
function pixelize(ctx, imageData, pixelSize) { const { width, height, data } = imageData; const newData = new Uint8ClampedArray(data.length); for (let y = 0; y < height; y += pixelSize) { for (let x = 0; x < width; x += pixelSize) { const srcIdx = (y width + x) 4; const r = data[srcIdx], g = data[srcIdx+1], b = data[srcIdx+2], a = data[srcIdx+3];
// 填充整个像素块 for (let dy = 0; dy < pixelSize && y+dy < height; dy++) { for (let dx = 0; dx < pixelSize && x+dx < width; dx++) { const dstIdx = ((y+dy) * width + (x+dx)) * 4; newData[dstIdx] = r; newData[dstIdx+1] = g; newData[dstIdx+2] = b; newData[dstIdx+3] = a; } } }}
const newImageData = new ImageData(newData, width, height); ctx.putImageData(newImageData, 0, 0); }
css Filter: url(#pixel) 不实用，别走这条路
虽然 svg 滤镜能写 filter: url(#pixel) 在多数浏览器里不支持动态参数，无法响应式调整像素大小；且性能差、渲染延迟明显；移动端基本不可用。
结论很直接：不用 SVG 滤镜做像素化。不是不能写，而是写了也难维护、难调试、难适配。
真正要注意的复杂点，其实是图像加载时机和跨域策略——img.onload 必须等资源就绪再绘图，而 CORS 错误不会报红，只会静默失败导致 getImageData 报 SecurityError。这两个地方卡住的人，远多于算法本身。