手机样机 Mockup 生成器

上传应用截图,秒级套入 iPhone 灵动岛 / Android 挖孔 / 经典款 外壳,配渐变展台背景与投影,Canvas 本地合成导出 PNG。做发版分享图、应用商店预览图不用装 PS,文件只读取不上传。

1截图与样式

点击或拖拽上传截图(PNG / JPG)

图片仅在浏览器内存中合成,不会上传服务器
尚未选择截图

2合成预览

预览为实时合成结果;导出按所选倍率重绘,尺寸 1600×2200(2×)。

机型规格预设与自定义导出尺寸

8 组主流导出规格一键套用(含应用商店与社交分享尺寸);也可自定义宽高。下方 SVG 比例图按实际导出尺寸绘制,标出画布、机身与安全边距。

调整尺寸后显示比例图
当前导出 1600×2200px(2×)
SVG 会内嵌已载入的截图(无截图时导出机身与背景);JSON 便于整套素材统一规格。

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

📱口径说明与常见误填

把合成规格说清楚,出图一次就够。

屏幕比例
截图按 9:19.5 视口比例居中裁切填充(cover),过窄的横图会先放大再裁,导出前务必在预览确认主体没被切掉。
机型外壳
iPhone 灵动岛 / Android 挖孔 / 经典款 Home 圆钮三种外壳由 Canvas 矢量绘制叠加,圆角半径、刘海形状与侧键位置随机型自动切换。
边框配色
钛黑、银、紫、金四色只作用于机身边框,展台背景另有五套渐变(紫罗兰/日落/薄荷/墨黑/纸白),两者互不影响。
导出倍率
预览固定按 800×1100 绘制;1× 导出 800×1100,2× 导出 1600×2200,上商店或做海报建议直接 2×。
隐私口径
图片仅经 FileReader 读入浏览器内存合成,不上传服务器,刷新即消失;「复制图片」走剪贴板 API,需 HTTPS 或本地环境。

这个工具解决什么问题

发版海报、商店预览图、方案汇报页都离不开截图套手机壳,但装 PS、开付费网站、传图到陌生服务器都麻烦。本工具在浏览器里用 Canvas 本地合成:上传截图自动按 9:19.5 裁切填充,灵动岛、挖孔、Home 键矢量外壳一键切换,配渐变展台与机身投影,2× 高清 PNG 直接下载或复制到剪贴板,图片全程不出本机。

三条出图铁律

① 截图越接近 9:19.5 越好:比例差太多时 cover 裁切会切掉内容顶部或底部,先按目标机型真实分辨率截图,套壳才不用二次调整。

② 深色背景配深色 UI 慎用:墨黑展台 + 深色截图容易糊成一片,做整套素材时先统一机型与背景,再逐张检查截图主体是否清晰。

③ 存档记得留原始截图:合成图刷新即失,原始截图只在内存;重要素材导出 PNG 后同时保存原图,方便日后换壳重做。

怎么用

  1. 第 1 步 · 上传截图或载入示例
    点上传区选择 PNG / JPG / WebP 截图(也可拖拽),或点「载入示例截图」先体验效果;图片只在本地读取。
  2. 第 2 步 · 选机型、边框与背景
    在「截图与样式」卡切换 iPhone / Android / 经典款外壳、四色边框、五套展台背景,按需开关机身投影。
  3. 第 3 步 · 确认合成预览
    右侧「合成预览」实时重绘,检查截图裁切位置与投影效果;不满意直接回左侧改选项。
  4. 第 4 步 · 导出 PNG 或复制图片
    选 1× 或 2× 倍率后点「下载 PNG」保存 1600×2200 高清图,或「复制图片」直接粘进聊天工具与设计稿。

更新记录

  • v1.0 2026-11-02 v1.0 上线:iPhone 灵动岛 / Android 挖孔 / 经典款三种矢量外壳、四色边框与五套展台渐变、机身投影开关、1×/2× 倍率导出、PNG 下载与剪贴板复制、示例截图。

常见问题

有没有免费的手机样机在线生成?
本页就是:无需注册、无需安装,浏览器里用 Canvas 把截图合成进手机外壳,直接导出 PNG。对比付费网站,它不加水印、不上传图,商用发版也放心。
app 截图套壳工具有哪些用法?
常见用法是发版海报、更新日志配图、商店预览图与方案汇报页。切机型 / 边框色 / 背景渐变三组选项即可产出统一视觉的多张套壳图,保持整套素材风格一致。
怎么把截图放进 iPhone 模型里?
点上传区选择截图,工具会按 9:19.5 屏幕比例自动裁切填充,灵动岛、圆角、侧键由 Canvas 矢量绘制叠加,无需抠图;换 Android 或经典款机型一键切换。
应用商店预览图怎么制作?
先用 2× 倍率导出高清样机图,再在商店后台要求的尺寸画布(如 1284×2778、1242×2688)上排版标题文案即可。注意商店截图不能含状态栏以外的虚假系统元素。
有 mockup 在线免费中文工具吗?
国外站多为英文且有导出限制。本页全中文界面、纯本地合成,图片读取后只驻留内存,刷新即消失,对涉密界面截图尤其友好。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
🌈 色盲模拟器 输入颜色或上传图片,按红色盲、绿色盲、蓝色盲与全色盲标准色彩… → 📐 8pt 栅格间距计算器 按 8pt 或 4pt 基准栅格计算界面间距:输入尺寸自动吸… → 🔤 模块化字阶生成器 以基准字号与比率生成模块化字阶:内置黄金比、大三度等八种经典… → 🎨 色阶与深色模式映射器 输入主色 HEX 自动校验并派生 50 到 900 十档色阶… →
全部工具 →