Pixel It 像素化指南如何在网页里把照片转换成复古像素艺术【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelit给独立游戏做素材或给站点画一张像素头像时经常要把一张现成的照片变成方块状的像素风格。逐格重画费时用图像处理工具一张张导出又和网页流程脱节。Pixel It 是一个 JavaScript 库专做这一步把页面上的图片读进来当场输出像素画 canvas整个过程在浏览器里完成。四个能力像素化、调色板、灰度与导出 像素化scale参数控制方块粒度取值 0–50默认 8数值越大方块越粗 调色板传入 RGB 颜色数组把图像整体映射到指定配色最少 2 色默认内置 16 色 灰度把像素化结果转为黑白一行方法调用 尺寸控制与导出maxWidth/maxHeight限制输出尺寸saveImage()直接把结果下载为 PNG 文件三行代码跑出第一张像素画先通过 git clone 把仓库 https://gitcode.com/gh_mirrors/pi/pixelit 拉到本地也可以直接用仓库里构建好的docs/js/pixelit.min.js。页面上放一张图片和一个 canvas实例化 pixelit 后依次调用draw()和pixelate()画布上立刻出现像素画两个元素的 id 都可以省略库默认取pixelitimg和pixelitcanvas。img srcassets/sky.jpg idpixelitimg alt原图 canvas idpixelitcanvas/canvas script srcdocs/js/pixelit.min.js/script script // id 符合默认值无需传任何配置 const px new pixelit(); // 先绘制原图再做像素化 px.draw().pixelate(); /script示例页 docs/index.html 就是同一套结构还带了滑块可以实时改参数。不同参数下像素画效果差多少下面这组左右对比最直观右侧是原图经过 scale17、4 色调色板处理后的结果构图保留颜色被收敛到 4 色以内。左为原图右为 scale17 加 4 色调色板处理后的像素画换成自己的配色时把palette数组和 scale 一起传入构造器即可const px new pixelit({ from: document.getElementById(pixelitimg), to: document.getElementById(pixelitcanvas), scale: 17, // 方块粒度范围 0-50 palette: [[26,28,44],[93,39,93],[177,62,83],[239,125,87]] // 4 色调色板至少 2 色 }); px.draw().pixelate().convertPalette(); // 像素化后吸附到调色板测试页 docs/tests.html 用 scale12 批量处理了一组 50px 到 2720px 宽的图片下面两张是其中的输入图可以拿来自行对比不同分辨率下的方块效果。2720px 宽的键盘图用于大尺寸图片的像素化验证970px 的键盘裁剪图用于中小尺寸图片的效果验证从游戏素材到头像四类用法各对应哪个参数游戏素材。为独立游戏制作复古风贴图时一次性传入 16 色调色板convertPalette()会把每个像素吸附到最近色多张图的角色配色能保持一致。头像与封面。处理完直接调saveImage()下载结果配合maxWidth控制输出像素数适合做社交头像或文章封面。灰度图标。draw().pixelate().convertGrayscale()把照片变黑白像素scale 调大一点方块更硬更接近界面元素的观感。参数对比。不必自己写测试页打开 docs/tests.html 就能看一组分辨率下的方块密度差异方便为不同尺寸素材挑 scale。调参时容易踩的几个点scale 从小到大试3 左右方块仍很细接近原图10–20 是复古感比较明显的区间30 以上接近抽象。另注意源图宽或高超过 900px 时内部会把工作 scale 自动减半实际方块比设置的数值略小。调用顺序影响颜色convertPalette()和convertGrayscale()都作用于画布像素先调色板再灰度和反过来效果不同按想要的视觉先定顺序不满意就重新draw()再跑一遍。大图走像素循环调色板和灰度都是逐像素读取画布数据高分辨率下耗时随像素数上涨。4K 源图建议先用maxHeight/maxWidth压住输出尺寸再执行convertPalette()避免浏览器长时间卡住。适合做什么不适合做什么Pixel It 适合把现成照片快速变成像素风素材不适合精确绘制或离线批量渲染逐格控制的需求得交给专门的像素编辑器。下一步可以打开 docs/index.html 直接试参数读一遍 src/pixelit.js 了解调色板最近色是怎么算的或者把 scale 分别在 3 和 20 上跑一遍感受方块粒度的差距。【免费下载链接】pixelitCreate pixel art from an image项目地址: https://gitcode.com/gh_mirrors/pi/pixelit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考