图片处理进阶：叠加、比对、取色与图标的四件事

从"能打开"到"能上架"，中间隔着四道工序

大部分人的图片处理停留在压缩和转格式——图片压缩 把体积降下来、图片格式转换 把 webp/avif/png 互转、SVG优化压缩器 把矢量图里编辑器留下的冗余元数据和过长的数值精度清干净。这三款是基本功，站内《图片工具箱》有完整介绍。但真正做设计、做前端、做运营的时候，让人卡住的多半是另外四件事：几张图合成一张、改了之后到底哪里不一样、这张参考图是什么配色、Logo 怎么变成各种尺寸的图标。这篇就把这四件一次讲清，用到的都是浏览器本地处理，素材不上传。

多图叠加：水印、合成与氛围感的混合模式

把 Logo 压在产品图上做水印、把一张纹理叠到纯色背景上出质感、两张图半透明融合出一张过渡图——这些以前要么开 Photoshop 要么装命令行 ImageMagick。图片叠加工具 支持把多张图片按图层叠起来，混合模式可选正片叠底、滤色、叠加、柔光、强光这一类（和 PS 里的 Blend Mode 一一对应），再加渐变蒙版控制哪一块透出、哪一块压住，配合透明度滑杆微调。

实用心法：混合模式决定"怎么合"，蒙版决定"合在哪"。做深色背景上的发光质感就用滤色，做浅色纸张上的印章就用正片叠底；水印想压得自然，别只调透明度，改成"叠加"或"柔光"再降透明度，边缘会比纯 alpha 混合柔和得多。合成图全程在本地 canvas 完成，客户给的原图不会经过任何服务器。

图片对比：把"到底改了哪里"变成一眼看出

设计稿改版前后、优化前后的压缩效果、截图有没有漏一个元素——靠肉眼在两张图之间来回切，费时还容易漏。图片对比工具 提供三种看法：并排对比把两张图左右摆着看整体；滑动对比在同一位置上下压一张、拖动分割线露出另一张，改动点会"跳"出来；切换对比两张在同一区域快速交替显示，靠闪烁抓住人眼，连几个像素的位移都藏不住。

这第三种"闪烁对比"是从卫星图变化检测借来的思路，找差异最快。日常用途很具体：设计师自查改稿漏没漏改、前端还原设计稿对色值和间距、运营确认水印和文案有没有错位。两张图都只在浏览器内存里比对，不上传、不落盘，未发布的活动稿可以放心用。

取色：从一张参考图反推可用配色

看到一张图很舒服的配色，想用到自己页面上，手动吸管取色常常取出几个"看着对但放一起不搭"的颜色，因为没做明度和饱和度的规整。图片配色方案提取 的做法是把图里的主要颜色聚类提取出来，生成一组和谐的色彩组合，并给出每个色的十六进制与 RGB 值，直接复制就能进 CSS。

用的时候有个取舍：主色取 3–5 个就够。取太多会连阴影和噪点都当成颜色；真正落地时一般是一个主色、一到两个强调色、再配中性背景与文字灰。把提取结果当"起点"而不是"终点"：主色定下来后，强调色拿它做同类色或互补色微调，比直接全量套用更容易协调。做主题、写 Tailwind 自定义色板、给活动页找基调都能先跑一遍再手调。

图标生成：一张源图铺满所有尺寸

favicon 和 App 图标的麻烦不在设计，在尺寸。一个站点要 16、32、48 的 favicon，要苹果 apple-touch-icon 的 180，要 Android 自适应图标的一整套密度倍图，PWA 清单还要 192 和 512。手动导出既繁琐又容易漏一个尺寸导致某些设备糊成一团。图标生成器 让你上传（或本地选择）一张正方形源图，一次性生成各常用尺寸的 PNG 图标和 favicon 相关文件，把多尺寸导出和命名这些机械活自动化掉。

出源图时守两条：留出安全边距，图标在各系统里会被裁成圆形或圆角矩形，关键元素别贴边；用高分辨率的方形底图（比如 1024×1024），向下缩放比向上放大清晰得多。生成结果本地即可下载，Logo 原图不上传服务器。

场景对照：该开哪一款

常见问题

这些处理画质会不会受损？

叠加与合成在本地 canvas 走一遍是有重编码过程的，输出时尽量选无损或高质量档位；对比和取色只读不改，不影响原图；SVG 优化走的是无损路线——去掉的是编辑器元数据和小数点后的冗余精度，不改变视觉形状。真要保留最高画质的原图，把中间产物另存，别覆盖源文件。

会不会把客户素材传到你服务器上？

不会。叠加、对比、取色、图标生成四款都在浏览器本地完成，图片不经过网络传输、不写入服务端；只有你主动下载结果时数据才离开当前页面。

小结

进阶图片处理就四件事：合成用图片叠加（混合模式定怎么合、蒙版定合在哪）、找差异用图片对比（闪烁对比最快）、定基调用配色提取（取 3–5 个再手调）、铺尺寸用图标生成（留安全边距、用高清方图），配上图片压缩、格式转换和 SVG 优化三件基本功。处理全程浏览器本地运行——出图不上传，未发布素材继续只在你自己机器上。