设备样机框生成器

工具介绍

设备样机框生成器可以将你上传的截图快速放入手机、平板、笔记本电脑或浏览器窗口的样机边框中，生成专业的展示图片，无需使用复杂的设计软件。

使用方法

1. 点击「上传截图图片」按钮，选择你需要处理的截图图片文件。
2. 在「选择设备类型」下拉菜单中选择你想要的样机类型。
3. 可以自定义背景颜色，以及调整截图在屏幕区域的缩放比例。
4. 点击「导出 PNG 图片」按钮即可下载生成好的带边框样机图片。

实现原理

工具通过纯 Canvas API 在浏览器本地绘制设备外框、屏幕区域，并将上传的截图按比例缩放到屏幕区域中心位置，所有处理均在你的浏览器本地完成，不会上传图片到服务器。最终可以直接导出 PNG 格式图片保存使用。

注意事项

• 请确保上传有效的图片文件，支持 JPG、PNG、WebP 等常见图片格式。
• 生成的图片比例由所选设备的固定比例决定，如果截图比例和设备比例不同，工具会自动留边居中显示。
• 缩放比例调整的是截图本身在屏幕区域的大小，100% 为填满屏幕区域。