Pixel It：一张图转像素艺术，scale 一个参数控制颗粒度

Pixel It一张图转像素艺术scale 一个参数控制颗粒度【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelitPixel It 是一个纯 JavaScript 的像素化转换库把浏览器里的图片转成复古像素风格支持自定义调色板与灰度输出。它没有外部依赖适合需要生成游戏素材、复古头像或界面图标的开发者。谁会在什么场景下用它做独立游戏的开发者在需要低分辨率素材时可以把现有照片直接转成像素风格省去做图环节输出尺寸与原图一致导入引擎前再按需缩放。运营和社媒创作者在制作账号头像、封面时用它一张人像或风景照片经过调色板限制后会呈现接近 8-bit 游戏的观感不需要 Photoshop。前端工程师在页面上加像素化交互效果时把它嵌入表单即可用户选择图片canvas 上即时出结果再调用saveImage()让用户下载 PNG。三步跑通引入脚本、放两个元素、调一次方法链先把项目拿到本地git clone https://gitcode.com/gh_mirrors/pi/pixelit然后准备一个img和一个canvas引入压缩后的库调用方法链img srcphoto.jpg idpixelitimg canvas idpixelitcanvas/canvas script srcdocs/js/pixelit.min.js/script script const px new pixelit({ from: document.getElementById(pixelitimg), to: document.getElementById(pixelitcanvas), scale: 8 }); px.draw().pixelate(); /scriptfrom和to两个元素如果不传库会自动取 id 为pixelitimg和pixelitcanvas的节点所以最小化写法只剩new pixelit()加一行px.draw().pixelate()。完整配置项和 API 列表见 示例页文档。4 色调色板处理前后对比色彩被压缩到 4 个色块后轮廓依然清晰scale 取值 0 到 50决定像素块粗细现象scale 越小像素块越小、细节越多调大到 20 以上画面就只剩粗略色块。原理库先把原图按scale × 0.01的比例缩小画到临时 canvas 上再放大回原尺寸同时关闭了图像平滑缩放产生的色块就是像素。关键参数scale只接受 1 到 50 的整数传 0 或超范围会静默回落到默认值 8所以不写它也能得到正常效果。调色板颜色如何从原图收敛到指定色值现象同一张图用默认 16 色调色板和自定义 4 色调色板色阶数量明显不同4 色时画面接近海报化。原理convertPalette()逐像素遍历 canvas用 RGB 欧氏距离算出每个像素到调色板里所有颜色的差值取距离最小的那个色值替换原色。关键参数palette传[[r,g,b], ...]数组默认是 16 色想收紧色数就少给几个颜色也可以先px.getPalette()拿到当前值再setPalette()替换。灰度、尺寸上限与输出保存灰度convertGrayscale()把每个像素的 R、G、B 取平均后写回三个通道得到黑白像素画。注意它和调色板的先后顺序会影响最终结果——先调色再转灰度与先灰度再调色得到的明暗分布略有差异。尺寸配置里的maxWidth/maxHeight只在draw()阶段生效超过上限才按比例缩小高度优先于宽度不设置则保持原图分辨率。保存saveImage()会把 canvas 内容转成 dataURL 并触发下载文件名固定为 pxArt.png适合接到下载按钮上。实际用过之后要注意的几件事scale 的感知效果和图片分辨率强相关小图配大 scale 会糊成一片大图配小 scale 则看不出像素感建议从 8 开始试每调一档看一次预览。另外源码里有一条分支任一边超过 900px 的图片内部缩放比例会自动减半也就是说超大图实际颗粒度比你设的值更细想要更粗的块要适当把 scale 调大。所有方法都返回 this 可以链式调用但顺序敏感draw()必须在最前面它负责把原图画进 canvas 并应用尺寸上限漏掉它后续方法读到的就是空画布。灰度和调色板这两个方法都基于 canvas 当前像素谁在后谁覆盖前面的结果。转换是逐像素同步执行的原图分辨率越高耗时越长浏览器里处理上千像素宽的图建议先在draw()阶段用maxWidth压一版再走像素化流程。小结Pixel It 把缩小—放大—取色这三步封装成一条方法链你在页面上准备好 img 和 canvas就能得到可下载的像素画。想看更多参数组合可以从示例和测试页入手实现逻辑都在核心源码里篇幅不大值得一读。示例与配置说明不同尺寸图片的转换测试页核心源码【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考