跳到正文
网页珍奇柜Web Curio

复古抖动图片工具

Dither Me This,Shadowfax Rodeo (doodad.dev),2021 年

正在布展…

原作直展:这是 Shadowfax Rodeo (doodad.dev) 的原始作品,按 MIT 许可证收录(版本 5812b6f)。原作是构建期使用的 Node 库,没有网页界面;这里把它的源码原样用 esbuild 打包到浏览器,配上本柜编写的展示页:默认抖动一幅程序生成的风景,也可选择或拖入自己的图片,切换 8 种误差扩散、Bayer 有序抖动和调色板。doodad.dev 上的网页版是另一套未开源代码,未收录。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步把图片画到 canvas 读出像素。
  2. 第 2 步支持有序抖动(Bayer 矩阵)与误差扩散(Floyd-Steinberg、Atkinson 等)。
  3. 第 3 步每个像素量化到最近的调色板颜色。
  4. 第 4 步导出为 PNG,颜色数少因此压缩率高。

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Draw the uploaded image to an offscreen canvas at a chosen pixel scale and read its ImageData. For ordered dithering, add a threshold from a 4x4 or 8x8 Bayer matrix to each pixel before snapping to the nearest palette color. For error diffusion, process pixels left-to-right, snap to the nearest palette color, and distribute the quantization error to neighbors with Floyd–Steinberg or Atkinson weights. Render the result upscaled with pixelated rendering and offer palette presets as small arrays of RGB values.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:doodad.dev/dither-me-this loads (HTTP 200, Nuxt SPA titled 'DOODAD.dev'); repo via gh api: MIT, created 2020-12-19.