Pixel It 调色板使用指南：3 步把照片变成复古像素头像-平芜编程栈

Pixel It 调色板使用指南：3 步把照片变成复古像素头像

【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelit

想把宠物照变成复古游戏头像，却不知从哪下手？用 Pixel It 的调色板功能，几行代码就能把照片转成像素风。三步出图，效果先睹为快。

先看效果：调色板前后对比

同一张人物画：左边是原图，右边套了 4 色调色板。颜色被收拢成紫、粉、深靛，细节还在，但一眼就是复古像素风。原理很简单——图里每个像素，都会被换成自定义调色板中最接近的那个颜色。

图：左侧原画，右侧用 4 色调色板转换后的像素风格效果，色彩统一鲜明

看完效果，进入最小可运行流程。

三步上手：照片怎么变成像素画

这个库只用两个 DOM 元素：一张图和一块画布。不传任何配置也有默认值，16 色调色板直接可用。

第一步：放素材。页面里放一张图，id 用 pixelitimg；再放一个 canvas，id 用 pixelitcanvas。

第二步：建实例。引入仓库 src 目录里的 pixelit.js，用 new pixelit() 建实例，scale 管像素块大小，默认 8。

第三步：链式出图。draw() 读图，pixelate() 做像素化，convertPalette() 套调色板，顺序不能乱。

<img src="pet.jpg" id="pixelitimg"> <canvas id="pixelitcanvas"></canvas> <script src="pixelit.js"></script> <script> // 三步出图：绘制→像素化→套色 const px = new pixelit({ scale: 8 }); px.draw().pixelate().convertPalette(); </script>

跑通后刷新页面就能看到像素图，调一下 px.saveImage() 就能存下来。完整 API 见 src/pixelit.js。

想换风格，下面按目标给三组参数。

三种玩法：按你的目标选参数 🎨

复古像素头像怎么调：调色板自定义成 4 色

头像最吃风格统一，颜色越少越像游戏角色。配一个亮色、一个中间色、一个深色、一个暗背景。

这样设完，4 色复古风一步到位。把颜色数组传给 setPalette，再套一次 convertPalette 即可。

// 4 色调色板示例：青、紫、黄、黑 const myPalette = [ [0, 255, 255], [255, 0, 255], [255, 255, 0], [0, 0, 0] ]; px.setPalette(myPalette).convertPalette();

预期效果：色块大、对比强，方形头像最出片。scale 建议 6 到 10，再大就只剩色块没细节了。

灰度像素插画怎么做：先灰度再出图

喜欢黑白质感，就在像素化后加一步 convertGrayscale()。毛发细节多的动物照片，灰度后层次反而更清楚。

图：右侧原照，左侧灰度像素化效果，毛发的明暗层次保留完整

参数组合：scale 8、保留灰阶、不套自定义调色板。想加色，灰度后照样能接 convertPalette()。

宽幅社交配图怎么出图：限住 maxWidth

做社交头图或壁纸，照片往往很宽。在实例里传 maxWidth，出图就会等比缩到限宽以内，不再撑爆页面。

下面这张 2720 像素宽的键盘照就是典型素材，直接出图画布会非常大。

图：2720 像素宽的键盘照，限制 maxWidth 后适合做社交头图

参数组合：maxWidth 1200、scale 10、默认 16 色。预期效果：像素颗粒清晰、文件不臃肿，直接能当配图。

想突出局部细节，裁一张特写再来一次：

图：特写素材配更大的像素块，细节对比更突出

注意：超过 900 像素的大图，库会自动把 scale 减半，防止画布过大。想要更细的颗粒，换小图处理更稳。

参数速查：scale、palette、maxWidth 怎么取值

大部分效果由这几个参数决定，调参前先看这张表。

参数	取值范围	对效果的影响
scale	1–50，默认 8	像素块大小；越大越粗犷，越小越细腻
palette	数组，至少 2 个 [r,g,b]，默认 16 色	决定整张图只用哪几种颜色
maxWidth / maxHeight	正整数，可不传	输出图等比缩到限宽或限高内，高度优先
from / to	图片元素 / 画布元素	指定读哪张图、画到哪块画布