设备样机图
Device Mockup
把截图放进手机、平板、笔记本或浏览器外框里，配上背景和阴影。
把截图放进手机、平板、笔记本或浏览器的外框里，导出最高三倍大小的 PNG。外框是用圆角矩形画在 canvas 上的，不是任何产品的照片，所以这里没有任何商标，输出在任何缩放下都保持清晰。截图从不离开标签页。
怎么用
拖入截图
PNG、JPEG 或 WebP。下面的统计行显示图片比例和外框屏幕比例的对照，这个数决定下一步的选择怎么走。
选外框，再选图片怎么适配它
“覆盖”裁掉中间以填满屏幕，“包含”显示整张图片并留黑边，“顶部对齐”是给长页面截图的——它保留页面顶部，让其余部分从底部跑出去，一张滚动页面的截图通常想展示的就是这个。
设定留白和背景
留白是让截图看起来经过构图而不是被裁掉的东西。图片要放到彩色幻灯片或者一个你控制不了背景的页面上时，选透明背景。
除非你另有把握，否则按 2× 导出
预览下面那行给出你选的缩放下的精确输出尺寸。2× 适合视网膜屏或 README；3× 给印刷或大幅幻灯片，文件会变大。
常见问题
这是 iPhone 吗？MacBook 吗？
不是。它们是按现代设备使用的宽高比画的通用形状——手机 19.5:9，平板 4:3，笔记本 16:10。没有 logo，没有产品照片，没有受商标保护的轮廓，这是刻意的：带真实设备的样机图通常未经许可不能用于营销。
我的截图被以我不想要的方式裁了。
统计行显示你的比例和外框的比例。两者不同时，“覆盖”必须裁掉一些。切到“包含”看带黑边的整张图片，或者要紧的部分在顶部时切到“顶部对齐”，或者按外框的比例重新截图。
能把几个屏幕并排放吗？
这里不能——一张图片，一个外框。构图一个三台设备的场景是排版工作，做得糟比不做更糟。把每一张在透明背景上导出，在你已经在用的幻灯片工具里排列它们。
我的截图会上传吗？
不会。它在这个标签页里解码为 ImageBitmap 并画到 canvas 上，PNG 由 canvas 本身生成。什么都不走网络，对一张未发布产品的截图来说，这就是要点。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
图片描边与留白
Border & Padding
给图片加纯色、渐变或圆角边框和留白，也能补白到指定比例。
社交分享卡片生成
Social Card Generator
把标题、副标题、品牌文字和可选的 logo 摆进模板，生成 1200×630 的分享图，并写好配套的 meta 标签。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流，在不改变尺寸的前提下减小 PNG 体积。
截图标注
Screenshot Annotator
在截图上画箭头、方框、编号步骤和模糊块，导出成一张合并好的图片。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
宽高比计算器
Aspect Ratio Calculator
按目标比例算出缺的那条边，并列出与之吻合的标准尺寸。