Pixel It：3 行代码把照片变成像素画

Pixel It：3 行代码把照片变成像素画

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

Pixel It 是一个纯 JavaScript 像素艺术转换库，把普通照片变成复古像素风格的图片。它没有外部依赖，只使用浏览器 Canvas，核心实现集中在src/pixelit.js一个文件里。你可以把图像像素化、转成灰度，或者把颜色压缩到你指定的调色板。

5 分钟跑通第一张像素图

克隆仓库并安装依赖，用 gulp 启动本地构建：

git clone https://gitcode.com/gh_mirrors/pi/pixelit npm install gulp serve

页面里放一个img和一个canvas，用默认约定就能运行：

<img src="sky.jpg" id="pixelitimg" alt=""> <canvas id="pixelitcanvas"></canvas> <script src="pixelit.js"></script> <script> const px = new pixelit(); px.draw().pixelate(); </script>

draw()把图片画到画布上，pixelate()输出像素化结果。不传配置时，库默认读取 id 为pixelitimg的元素、写到 id 为pixelitcanvas的画布，所以这两个 id 对上就不用传任何参数。

三种输出：像素化、灰度与调色板压缩

实例上可组合的变换有三种：

• .pixelate()：基础像素化。先缩小再放大形成色块，块的大小由 scale 决定。
• .convertGrayscale()：把每个像素的 RGB 三通道取平均，得到黑白像素图。
• .convertPalette()：把每个像素映射到调色板中最近的颜色。调色板由palette配置，默认内置 16 色。

三者可以链式调用，最后用px.saveImage()把结果以pxArt.png的文件名下载。

图：左侧为原始油画，右侧经 Pixel It 以 4 色调色板压缩后的像素艺术效果

scale、palette 与尺寸上限怎么取

scale控制像素块大小，取值 0–50 的整数，默认 8。小值块细、接近原图；大值块粗、更抽象。官方 4 色示例用的就是 17。传入超出 0–50 的值不会报错，而是静默回落到默认 8。

palette是[[r,g,b],...]形式的数组，之后也能用setPalette(arr)更换。颜色数量下限是 2，只有 1 色时convertPalette()不会生效。颜色越少风格越统一，越多越接近原图细节。

maxWidth / maxHeight限制输出尺寸，超过的部分会在draw()阶段被等比缩小；两者同时设置时高度优先。

const px = new pixelit({ from: document.getElementById('pixelitimg'), scale: 20, // 0-50，默认 8 palette: [[26,28,44],[93,39,93],[177,62,83],[239,125,87]] }); px.draw().pixelate().convertPalette();

两个实际处理链路

• 做游戏素材：输入一张人物或场景照片，scale 取 17–20，再链上convertPalette()压到 4–16 色，输出可直接当素材用的低分辨率像素图。docs/assets/px-palette4c.jpg就是 4 色、块大小 17 的效果。
• 处理大尺寸照片：输入一边超过 900px 的高清图，例如docs/assets/tests/里那张 2720×1224 的键盘照片。此时pixelate()内部会自动把缩小比例减半，同样的 scale 在大图上得到的块反而更大；想要输出尺寸可控，再配上maxWidth或maxHeight。

图：docs/assets/tests/ 目录中的 2720×1224 高分辨率测试图，用于验证 Pixel It 在大图上的表现

几个容易踩的坑

• scale 只在 0–50 区间生效，越界值会回落成默认 8，代码不会提示。
• convertPalette()需要至少 2 个颜色，1 色不产生效果。
• pixelate()、convertPalette()、convertGrayscale()都必须在draw()之后调用。
• 实例创建时会把源图片元素隐藏（visibility: hidden并固定定位），想保留显示需要自行处理样式。
• 一边超过 900px 的大图内部缩小比例自动减半，像素化程度和小图不一样，调参时要留意。

继续深入去哪看

docs/index.html是在线调试页，支持上传图片、上传 hex 或 csv 格式的调色板文件、手动加色。docs/tests.html用于验证不同尺寸图片的处理效果。核心类在src/pixelit.js，运行gulp serve后构建产物输出到dist/与docs/js/两个目录。整个转换链路就这一个文件，改算法、读源码都不需要跨目录。

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