#少女前線 416とM16A1のあの頃 - 反骨MAX
710 字
4 分钟
网页版像素画生成器：多取色 + 图像调整 + 导出
🎨 工具简介
网页版像素画生成器：纯前端单 HTML 文件，零后端、零外部依赖、离线可用。点格子画像素画，画完导出高清 PNG 或字符画。
✨ 功能一览
🎨 5 种取色方式
- 原生颜色选择器 + HEX 输入
- HSL 三滑杆：色相 / 饱和度 / 亮度实时联动（换色反向同步滑杆）
- 经典色板：PICO-8 16色 / DB16 / GameBoy 4色 / Endesga 32色，支持自定义色板（textarea 编辑 + localStorage 记忆）
- 吸管：点画布像素直接取色
- 图片取色：加载图片点任意像素取样，带 5×5 放大镜 + 坐标与 HEX 值
🖼️ 图像调整（作用于已画内容，非破坏性实时预览）
- 亮度 / 对比度 / 色调（色相旋转）/ 饱和度 四个滑杆，可一键重置
🖌️ 绘制能力
- 画笔 / 橡皮 / 油漆桶（容差可调）/ 吸管，Bresenham 插值不断线
- 撤销 / 重做（Ctrl+Z/Y，60 步快照）
- 分辨率可调：8×8 ~ 128×128 预设 + 自定义，可锁定宽高比
- 对称绘制：水平 / 垂直 / 中心（180°）三开关
🖼️ 参考图
- 半透明描图底稿（透明度可调、开关）
- 一键「转像素画」：图片量化到画布分辨率（可映射当前色板或主色量化保留 N 色）
📤 导出
- PNG 下载（x1 / x4 / x8 / x16 最近邻放大）
- 复制图片到剪贴板（ClipboardItem）
- 文本导出：▓ 彩色块符号或 ASCII 亮度梯度，可自定义字符
🤖 AI 制作信息
| 项目 | 内容 |
|---|---|
| 编写 | dsh（DeepSeek Harness，模型 deepseek-v4-flash，reasoning High） |
| 代码形态 | 单文件 HTML（55KB，内联 CSS/JS，零外部依赖） |
| 测试 | 内联 JS node --check 通过；冒烟测试 38/38 通过（取色/调整/填充/对称/缩小/量化/导出逻辑）；70 个 DOM 引用 ID 全部存在无重复 |
| 架构 | RGBA 扁平数组内存画布 + 显示画布两级渲染，核心逻辑零 DOM 依赖便于测试 |
本次编写用量：输入 3.74M tokens（缓存命中 3.70M，命中率 98.96%）· 输出 45.0K tokens（推理 20.3K）· 谷时半价约 ¥0.46。
⚠️ 已知限制
- 撤销栈固定 60 步；画布尺寸上限 256×256
- 色调调整为色相旋转（作用于已画内容），新画的颜色不受影响
- 剪贴板复制依赖浏览器 ClipboardItem（Chrome/Edge 可用），失败会提示改用下载
- 未做工程文件保存/导出 JSON
📝 改动日志
- 2026-08-17：修复初始化崩溃——applyTheme 在启动序列中先于 initCanvas 调 render()，此时 S.pixels 仍为 null 导致
new ImageData(null)抛 TypeError 中断整个初始化（画布/色板/撤销/自动适配全部失效）；render 加 null 保护 + currentDisplayPixels 兜底后恢复正常 - 2026-08-17：初版完成（5 种取色 / 分辨率调整 / 亮度·对比度·色调·饱和度 / 对称 / 参考图 / PNG·文本导出）