明暗双图合成器:一张 PNG 同时适配白底与黑底
把亮色版和暗色版两张图合成一张透明 PNG:白底上显示亮色图,黑底上显示暗色图。上传两张就能并排预览,再下载这一份主题自适应素材,用于文档、README 或 UI——全部在浏览器本地完成。
明暗双图合成器能做什么
一张 PNG,两种观感
输出是逐像素 alpha 合成的结果:放在白色背景上呈现亮色版,放在黑色背景上呈现暗色版。README、文档页或 UI 因此只需一个素材,不必准备两套文件或写 media query。
两个上传槽,白底/黑底实时预览
分别选择亮色图和暗色图,两张都加载后立刻生成合成图,并同时在白色卡片和黑色卡片上预览,下载前就能判断两种主题下的效果。
固定导出 PNG
下载永远是 PNG,文件名固定为 light-dark-image.png,由 canvas.toDataURL 生成。没有 JPEG、WebP 或 SVG 输出,也没有质量/压缩参数。
画布取两张图中较大的尺寸
结果使用两者中较大的宽和较大的高,两张源图都会从左上角拉伸铺满画布。比例不一致时会被拉伸变形,而不是留白或裁切。
纯本地,且没有调参项
文件用 FileReader 读取、在 canvas 上合成,不上传任何内容。没有亮度、对比度、尺寸、位置、背景或格式控件,唯一的输入就是两张图。
明暗双图常见问题
这个工具到底是做什么用的?
它把亮色版素材和暗色版素材合成一张透明 PNG,外观随背景变化:白底显示亮色版,黑底显示暗色版。用于 README、文档和 UI 的主题自适应配图,而不是帮你生成两张独立的图片。
可以调哪些设置?
只有两张源图。没有亮度、对比度、颜色、位置、缩放、背景色、格式或质量控件,也不能微调合成参数;预览面板只用于展示。
支持哪些输入和输出格式?
输入用 accept="image/*",交给浏览器解码,JPEG、PNG、WebP、GIF 都可用;输出固定为 PNG,不提供 JPEG、WebP 或 SVG 导出。
能一次处理多组图片吗?
不能。每个上传槽只取第一个文件,页面一次只处理一组明暗图,没有队列、批量模式或历史记录。
有尺寸限制吗?两张图尺寸不一致会怎样?
除了浏览器 canvas 内存,没有额外的像素上限。输出尺寸是 max(宽) × max(高),两张图都从左上角拉伸到该尺寸,所以比例不同会变形,而不是补边或裁切。
是纯本地处理吗?
是。图片用 FileReader 解码并在浏览器 canvas 里合成,不上传、不经过服务端。合成结果以 data URL 暂存在内存中,直到你下载。
合成效果有多准?
是近似结果。亮色通道被重映射到 128–255、暗色通道到 0–127,再解算 alpha 与颜色,使它在纯白和纯黑上正确合成;颜色有量化误差、极端对比会丢层次,而且公式只在纯白/纯黑背景下精确(灰底或彩色底会混色)。透明度只取亮色图的 alpha,当两张图不满足亮度假设时该像素 alpha 会被夹到 0。

