手机截图加手机边框
2025年12月20日 · 618 字 · 2 分钟
手机截图直接贴在博客里面感觉有点干巴，让 AI 帮我写了一个手机截图的程序。从 bash 脚本，整理成 web 服务，前端一个 html 页面，后端 flask+ffmpeg。浏览器打开上传图片，预览效果，点击下载，简单实用。
PC 端效果：
移动端效果:
原理很简单，先找到手机边框的图片，然后将目标图片转成圆角贴到手机边框里面。ffmpeg 相关代码如下，用于测试：
#!/bin/bash
# ffmpeg -y -i port_back.png -vf "scale=iw:ih+20,format=rgba" op9_port_border.png
# ffmpeg -y -i port_fore.png -vf "scale=iw:ih+20,format=rgba" op9_port_fore_plus.png
# ffmpeg -y -i port_shadow.png -vf "scale=iw:ih+20,format=rgba" op9_port_shadow.png
# convert -size 1080x2400 xc:none -fill white -draw "roundrectangle 0,0,1080,2400,80,80" op9_mask.png
# 定义输入截图文件名变量
input_png=Screenshot_20251218_012005.png
# --- 第一步：圆角裁剪 ---
# 使用 ImageMagick 将截图与遮罩图 (op9_mask.png) 合并
# -alpha off: 关闭原始透明通道
# -compose CopyOpacity: 将遮罩图的形状应用为透明度
# -composite: 执行合成动作，生成带有圆角的截图
convert $input_png op9_mask.png -alpha off -compose CopyOpacity -composite output_round.png
# --- 第二步：调整尺寸 ---
# 使用 FFmpeg 稍微加宽图片（宽度+4像素），并确保颜色格式为带透明度的 RGBA
ffmpeg -y -i output_round.png -vf "scale=iw+4:ih,format=rgba" output_round_w_plus.png
# --- 第三步：创建画布并居中 ---
# 1. 创建一个 1370x2554 的空白透明画布 (nullsrc)
# 2. 将加宽后的圆角截图放在画布中心 (W-w)/2
ffmpeg -y \
-f lavfi -i nullsrc=size=1370x2554,format=rgba \
-i output_round_w_plus.png \
-filter_complex "overlay=(W-w)/2:(H-h)/2" \
-frames:v 1 \
output_2.png
# --- 第四步：叠机身底框 ---
# 将上一步生成的截图叠加在机身边框图 (op9_port_border.png) 之上
ffmpeg -y \
-i output_2.png \
-i op9_port_border.png \
-filter_complex "overlay=0:0,format=rgba" \
-frames:v 1 \
final.png
# --- 第五步：叠加前景元素 ---
# 在图片顶部叠加前景层（例如：屏幕反光或摄像头遮罩等）
ffmpeg -y \
-i final.png \
-i op9_port_fore_plus.png \
-filter_complex "overlay=0:0,format=rgba" \
-frames:v 1 \
final_with_fore.png
# --- 第六步：叠加阴影并输出最终结果 ---
# 叠加最后的阴影效果 (op9_port_shadow.png)，并以当前时间戳命名保存
ffmpeg -y \
-i final_with_fore.png \
-i op9_port_shadow.png \
-filter_complex "overlay=0:0,format=rgba" \
-frames:v 1 \
final_with_fore_shoadow_`date +%Y-%m-%d-%H-%M-%S`.png
# --- 清理工作 ---
# 删除处理过程中产生的临时中间文件
rm -f output_round.png output_2.png final.png final_with_fore.png