XPixelImage — 像素图

基于 Canvas 的像素风格图片转换组件。将任意图片降采样再最近邻拉升，产生像素块效果，支持像素强度调节与颜色数量限制。

实时演示

加载中...

加载中...

加载中...

<XPixelImage src="/pixel-demo.png" :pixel-size="16" />

Props

属性	类型	默认值	说明
src	string	—（必填）	图片地址：本地路径 / 网络 URL / base64 data URL 均可
width	number	300	展示宽度（px）
height	number	300	展示高度（px）
pixelSize	number	8	像素块大小（2~64），越大像素感越强
colorCount	number	0	颜色数量限制（0 = 不限制）
frame	boolean	true	是否显示像素风边框

像素强度对照

pixelSize	效果
4	细腻，保留较多细节
8	中等，平衡细节与像素感
16	粗犷，像素块明显
32	极简，仅保留色块轮廓

工作原理

1. 降采样：缩小到 (width/pixelSize) × (height/pixelSize)，最近邻插值保留硬边缘。
2. 颜色量化（可选）：设 colorCount 后将 RGB 空间均匀划分为 ∛colorCount 级，映射到最近色块。
3. 拉升：放大回目标尺寸，imageSmoothingEnabled = false 保证像素锐利。

注意事项

• src 变化自动重新加载并像素化。
• 大图 + 小 pixelSize 时中间计算量大，建议控制尺寸。
• colorCount 为均匀量化（非 K-Means），性能更好。
• 图片需支持 CORS，否则 Canvas drawImage 会报安全错误。