图片Logo添加的二三事：从「固定打卡」到「自由拖拽」
zm约 4 分钟前言
在AI素材扩散项目的图片处理需求里，给图片加Logo这件「小事」，我们足足折腾了两轮迭代。
最初的需求很简单：让用户上传图片和Logo，自动生成带Logo的成品图。但现实总爱给人上课——用户上传的图片有横有竖（1280x720、1080x1920、720x1280…），Logo位置要么被截半，要么挡住主体；后来用户又喊：「能不能自己拖位置？」的，于是我们从「固定位置版」升级到「拖拽自由版」，踩过坑也攒了经验。
本文就聊聊这两个版本的「进化史」，顺便给需要的小伙伴一份避坑指南。
前置条件（和当初我们踩的坑）
一开始我们以为「调用FFmpeg命令」很简单，结果被现实毒打：
环境坑：FFmpeg没装全（比如缺少libx264编码器），或者路径没配好，Golang调用时总报「command not found」；
Logo坑：用户上传的Logo带白底/黑边，直接叠加后像贴了块膏药；
尺寸坑：1280x720的图片放右下角刚好，1080x1920的图片放右下角，Logo小得像蚂蚁；
交互坑：用户说「我想把Logo放中间偏左」，但固定位置版根本不支持…
痛定思痛，我们分两步走：先解决「自动适配不同尺寸」的问题（版本一），再解决「用户自定义位置」的问题（版本二）。
版本一：自动定位版——「按规矩办事」的稳妥派
核心目标
不管用户上传的是横屏（1280x720）、竖屏（1080x1920）还是方屏（720x720），Logo都能「聪明」地贴在边缘，不遮挡主体，且自动去掉自身背景（白底/黑边秒变透明）。
关键步骤与踩坑记录
1. 第一步：给Logo「脱衣服」——去背景
用户上传的Logo常带白底（比如PNG图里的纯色背景），直接叠加会遮挡图片。我们用FFmpeg的alphamerge滤镜去掉背景，亲测有效：
# 输入：带白底的logo.png → 输出：透明背景的logo_transparent.pngffmpeg -i logo.png -f lavfi -i "color=c=white:s=100x100" \ # 100x100替换为Logo实际尺寸-filter_complex "[1:v][0:v]alphamerge=shortest=1[outv]" \-map "[outv]" -c:v png logo_transparent.png
坑点：s=100x100必须和Logo实际尺寸一致！否则alphamerge会失效，背景去不干净。后来我们用ffprobe自动获取Logo尺寸，动态替换参数（代码后附）。
2. 第二步：算位置——不同尺寸的「适配公式」
最头疼的是不同尺寸图片的Logo位置计算。我们总结了一套「动态坐标公式」，根据图片宽高比（横屏/竖屏）调整Logo的锚点：
代码实现（Golang）：
3. 第三步：调用FFmpeg「贴Logo」
有了坐标，用FFmpeg的overlay滤镜叠加Logo，命令模板如下：
优化前：
效果验证：LOGO再也不会被遮挡住啦！
版本二：自定义拖动版——「我的Logo我做主」的交互派
核心目标
用户上传原图和Logo后，能在页面上直接拖动Logo调整位置，前端记录坐标传给后端，生成个性化图片。
关键步骤与交互设计
1. 前端：用Fabric.js实现「拖拽自由」
我们选了Fabric.js（一个轻量的Canvas库），支持图片上传、Logo拖拽、坐标记录。
关键代码如下：
2. 后端：兼容「自定义坐标」与「自动适配」
前端传来的坐标是相对于原图的绝对像素值（比如x=100, y=200），后端直接用这个坐标调用FFmpeg的overlay滤镜即可。但为了兼容版本一的「固定位置」，我们保留了位置参数，用户可选「自动适配」或「自定义坐标」。
后端Golang代码示例：
用户体验优化：前端做了「坐标预览」——拖动时显示当前Logo的左上角坐标，避免用户手滑放太偏。
总结：两个版本
自动定位版 | 批量处理、固定logo位置 | 效率高、无需用户操作 | 位置固定，无法个性化 |
自定义拖动版 | 用户需要精细调整 | 灵活、符合用户预期 | 依赖前端交互，开发成本略高 |
踩坑经验：
Logo一定要去背景！否则叠加后像「贴膏药」；
不同尺寸图片的Logo尺寸要限制（比如横屏Logo宽度≤图片宽度的1/5）；
前端拖动的坐标要和后端FFmpeg的坐标逻辑一致（都是相对于原图左上角）。