图片叠加混合
把一张图叠到另一张上，用正片叠底压暗、用滤色提亮，透明度、缩放和位置都能拖，合成后直接导出 PNG。
底层图是画布，叠加图是贴上去的素材。可以直接把文件拖进这个面板或按 Ctrl+V 粘贴截图：底图还没有就当作底图，否则当作叠加图。两张图都只在本机处理。
混合设置
结果只会更暗，白色等于透明。做纸张纹理、阴影、磨损感最常用，把纹理设成这档再压一遍就贴上了。
画布尺寸
底层图放到画布里的方式
合成结果
还没有图片。先选一张底层图，再选一张要叠上去的图，这里会立刻显示合成结果。
使用说明
两层角色的分工要清楚：底层图决定画布大小，也是混合运算的基准；叠加图是贴上去的素材，可以缩放、平移、调透明度。合成顺序永远是先画底层再按模式画叠加层，所以把纹理放上层、把照片放下层是唯一正确的方向，反过来就成了拿纹理当底。
混合模式的数学性质决定了它们的适用范围。正片叠底是逐通道相乘，结果只会更暗，白色等于不变，所以白底的纹理图叠上去后白处会「消失」，只留下纹理本身；滤色是取反相乘再取反，结果只会更亮，黑色等于不变，是光照类和烟雾素材的正解。叠加、强光、柔光会把两层按底图的明暗分别走变暗或变亮两条路，观感更戏剧，但也更容易过曝或糊掉，配合 40% 到 60% 的透明度比较稳。差值算的是两像素差的绝对值，天然适合做对齐检查和对齐失败的可视化。
混合发生在「画布已有的像素」上，所以底下的东西必须是确定且不透明的。工具默认先给整张画布铺一层底色（默认白色），再把底层图按适配方式画上去：完整放入会等比缩到画布内并留白，铺满画布会等比放大到盖满并裁掉超出的部分，两种都不会拉伸变形。画布尺寸默认跟底层图走，切换到按叠加图之后，底层图会重新缩放去铺满新的画布，这一步是为了不丢失叠加图的完整范围。
性能上要有预期：混合模式是逐像素运算，画布到两三千像素以后拖动就会开始掉帧，叠加上大图缩放时更明显。先把原图缩到实际需要的尺寸再合成，比事后后悔快得多。另外浏览器对画布有尺寸上限，超限时 getContext 会直接返回失败，这时只能先缩小图片。导出固定为 PNG，得到的像素与预览逐点一致，不会再被压缩一次。
最后别忘了结果本身是确定的：同一组原图加同一组参数，在 Chrome、Firefox、Safari 上算出的像素一致，差异只可能来自原图解码出来的像素不同。要接着做裁剪或多图排版，用图片裁剪和多图拼接拼图接着处理。
常见问题
为什么同样的混合模式，和设计软件里看着不完全一样？
因为混合模式的取值、公式都写在 CSS Compositing 规范里，浏览器的画布实现都按它算，所以同一组参数在 Chrome、Firefox、Safari 上结果是一致的。差别主要来自输入：设计软件里的图层可能带透明度、处在别的色彩空间，而这里底图是不透明的、按 sRGB 算。只要两张原图相同、参数相同，导出的 PNG 就是逐像素确定的结果。
正片叠底和滤色该怎么选？
看你想让画面变暗还是变亮。正片叠底的结果只会比两层都暗，白色等于透明，所以适合贴纸张纹理、做阴影和旧化；滤色的结果只会比两层都亮，黑色等于透明，适合贴光晕、火光、雾气这类发光素材。剩下那些（叠加、强光、柔光）是把两者按底图明暗混着用，效果更强烈也更容易过头，透明度一般要压到四五成。
叠加图比底图大，会被裁掉吗？
默认会。画布尺寸跟着底层图走，底层图是「画布」、叠加图是「素材」，超出画布的部分被裁掉，这也是合成时最符合直觉的结果。如果你要保留叠加图的完整范围，把画布尺寸改成跟叠加图走，这时底层图会按适配方式（完整放入或铺满裁切）重新缩放去铺满新画布。
换了模式画面却几乎没变化，是怎么回事？
两种常见原因。一是叠加图那块区域本来就是纯白或纯黑，正片叠底遇白、滤色遇黑都不改变底层，自然看不出变化。二是模式还停在「正常」，等于直接把叠加图盖上去，只要透明度是满的，下面的东西就完全看不见了。想快速确认叠加图覆盖了哪里，切回「正常」再把透明度往下拉，一眼就能看出它占的范围。
透明背景的叠加图为什么边缘发黑？
混合模式是在已有的像素上做运算。画布先铺了一层底色（默认白色），透明区域不会被运算，所以 PNG 的透明边不会变黑，但如果你把画布底色改成了深色，或者底图本身是带透明通道的 PNG，半透明的边缘像素就会和深色底算在一起，看着发暗。要么把画布底色设成白色或与素材相近的颜色，要么换成「正常」模式直接覆盖。
怎么把两个元素精确对齐？
在预览图上按住拖动可以粗调，位置由中心和 X、Y 偏移量共同决定，松手后偏移量会同步到滑块和输入框，所以可以先拖再看着数值微调。要做更严格的检查，把混合模式切成「差值」：对齐的地方两个像素几乎相同，会算成一片黑，错位或亮度差的地方会明显发亮，一眼就能看出还差几个像素。
导出的图会不会变小或被压缩？
不会。导出固定为 PNG 无损格式，尺寸就是画布尺寸，逐像素与预览一致。要注意的是画布很大时（两三千像素以上）叠加模式会明显吃性能，拖动会有延迟，先把图缩小到实际需要的大小再合成会顺畅很多。超过浏览器画布上限的大图会被拒绝，这时也只能先缩小。