Pixel It2 行 JS 把照片像素化像素块大小 1 到 50 可调【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelitPixel It 是一个零依赖的 JavaScript 像素艺术转换库给它一张图还你像素画。一句 draw().pixelate() 即可把图片像素化还能叠加 16 色默认调色板与灰度转换。适合做复古头像、游戏素材和像素风海报。先看效果4 色调色板下的肖像左侧为原始肖像画右侧是 scale 17 叠加 4 色调色板后的转换结果整幅图收敛到粉色与深紫两个主色只剩人物轮廓和树冠的形状。三个具体的理由依赖被压进单个文件。整个库就是 src/pixelit.js 里一个 pixelit 类约 350 行代码package.json 里没有任何运行时依赖。往个人站点里塞它只需复制一个 pixelit.min.js 进页面不需要引入构建链。不用写代码先试。docs/index.html 的 Pixel It now 区域可以上传任意图片拖动 Block size 滑块范围 1–50时画布实时重算。做头像时先把参数拖到你满意的位置再回去写代码。默认参数已经有复古感。不指定调色板时库使用内置的 16 色调色板色调接近复古游戏精灵图。做一套像素图标时直接用默认值就能让整组图标风格统一。三步出第一张像素图1. 克隆项目git clone https://gitcode.com/gh_mirrors/pi/pixelit执行后项目落在本地压缩版构建产物已经在 docs/js/ 目录里可直接引用无需再跑一次构建。2. 准备两个元素页面里放一个idpixelitimg的img作为源图一个idpixelitcanvas的canvas作为输出目标。对象创建时 pixelit 会自动把源图隐藏并固定在左上角hideFromImg所以页面上少显示一张图。3. 两行代码生成script srcdocs/js/pixelit.min.js/script script const px new pixelit(); px.draw().pixelate(); /script执行后 canvas 被像素块填满图片按默认 scale 8 完成像素化。按场景调参数做头像用 scale 控制像素块scale 接收 1–50库默认 8演示页滑块起始值是 7内部乘以 0.01 作为缩小比例数字越小块越细越大块越粗。注意一个隐藏规则当源图宽度或高度超过 900px 时代码会自动把工作 scale 减半避免大图变成巨块这也是大图像素看起来比小图小的原因。测试页的参考值是 12。老照片转黑白px.draw().pixelate().convertGrayscale();convertGrayscale() 对每个像素取 R、G、B 的平均值再写回画布结果是灰度像素图。演示页的 Greyscale 勾选框本质就是调这个方法。只能在 .draw() 之后调用。锁定一套颜色const px new pixelit({ scale: 12, palette: [[26, 28, 44], [93, 39, 93], [177, 62, 83], [239, 125, 87]] }); px.draw().pixelate().convertPalette();palette 是 [r,g,b] 数组至少 2 色。convertPalette() 按欧氏距离把每个像素吸附到最近的调色板颜色整幅图就收敛到你定义的品牌色。演示页内置 12 套预设调色板可切换也支持上传 .hex 或 .txt 格式的调色板文件自定义调色板存进 localStorage 供下次使用。另外两条常用操作保存图片调 px.saveImage()浏览器直接下载当前画布文件名固定为 pxArt.png限制输出尺寸则在 config 里传 maxHeight 或 maxWidth再调 .resizeImage()两者都设时高度优先。四个容易踩的坑1. scale 改了没反应→ 构造函数对越界值0、负数、大于 50不报错静默回落到默认 8。现象是像素大小纹丝不动先检查数值是否在 1–50 区间。2. 调色板转出来没颜色→ convertPalette() 依赖颜色相似度比较0 色或 1 色跑不起来文档写明 2 colors minimum。检查数组长度再执行。3. 顺序一换结果就变→ .convertPalette() 和 .convertGrayscale() 都必须在 .draw() 之后调用且先后顺序不同会得到略有差异的图像先调色板再灰度与先灰度再调色板出来的颜色不一样。颜色偏灰偏脏时先查顺序。4. 大图像素比小图小→ 这是设计而非 bug宽度或高度超过 900px 时pixelate() 会把工作 scale 自动减半防止临时画布溢出裁掉图片底部。改算法前先跑一次测试页项目用 Gulp 构建npm install 后执行 gulp serve改动 src/ 下任何文件会自动重跑一遍babel 转译为 ES5 再压缩同时输出到 dist/ 和 docs/js/。修改像素化逻辑后打开 docs/tests.html页面用 scale 12 一次性转换 50、100、250、500、970、1720、2720px 宽的 7 张样例图不同尺寸的回归结果可以直接目检。1720px 宽的键盘照片是 tests.html 里 7 张按 scale 12 做像素化回归的样例之一。现在就试打开在线示例页上传自己的图片先看到效果再写第一行代码。在线示例页docs/index.html多尺寸测试页docs/tests.html核心源码src/pixelit.js【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考