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

Pixel It3 行代码把照片变成像素画【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelitPixel It 是一个纯 JavaScript 像素艺术转换库把普通照片变成复古像素风格的图片。它没有外部依赖只使用浏览器 Canvas核心实现集中在src/pixelit.js一个文件里。你可以把图像像素化、转成灰度或者把颜色压缩到你指定的调色板。5 分钟跑通第一张像素图克隆仓库并安装依赖用 gulp 启动本地构建git clone https://gitcode.com/gh_mirrors/pi/pixelit npm install gulp serve页面里放一个img和一个canvas用默认约定就能运行img srcsky.jpg idpixelitimg alt canvas idpixelitcanvas/canvas script srcpixelit.js/script script const px new pixelit(); px.draw().pixelate(); /scriptdraw()把图片画到画布上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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考