Screenshot Studio:免费的屏幕截图美化器、编辑器和模型制作器

免费屏幕截图工作室:捕获屏幕、添加渐变背景、窗框和 3D 倾斜、用箭头、步骤、模糊和聚光灯进行注释、制作 iPhone 和 MacBook 模型、将代码转换为图像、缝合滚动屏幕截图并删除状态栏。 PNG、JPG、WebP 或 SVG 在浏览器中导出高达 4 倍、100%。

由 Shehzad Munir 构建和维护 ·

截图工作室
Loading Screenshot Studio
  • 图像工具
  • 自由的 · 无需注册
  • 在您的浏览器中运行
  • 19特点
Share

浏览器中的完整截图工作室

Screenshot Studio 是一款免费的一体化屏幕截图应用程序,可在浏览器中运行。捕获屏幕,使用渐变、网格或模糊背景、窗框和 3D 倾斜美化镜头,并使用箭头、编号步骤、聚光灯和永久密文对其进行注释。您还可以将它们放置在 iPhone、iPad 和 MacBook 模型中,将代码转换为主题图像,缝合滚动捕获并清理手机屏幕截图。导出 PNG、JPG、WebP 或 SVG,无需上传、无水印、无需注册。

Screenshot Studio 取代了大多数人使用的一堆单一用途应用程序。捕获您的屏幕、窗口或浏览器选项卡;使用渐变、网格或模糊背景、macOS、Windows 或浏览器框架以及 3D 倾斜来美化它;用箭头、编号步骤、文本标签、模糊、聚光灯和放大镜对其进行注释;将其放入 iPhone、iPad 或 MacBook 模型中;将滚动捕获拼接成一张长图像;或将代码片段转换为可共享的图像。每种模式都通过“发送到”将其结果传递给下一种模式,因此可以在一个流程中对捕获的图像进行裁剪、注释、美化和加框。一切都在 Canvas API 上本地运行,因此永远不会上传屏幕截图,也没有水印或注册。

特征

  • 捕获:以 3/5/10 秒延迟捕获屏幕、窗口或浏览器选项卡并选择区域
  • 粘贴 (Ctrl/⌘+V)、拖放或上传到任何模式,以及可供尝试的内置示例
  • 发送到:在一个流程中在捕获、美化、注释、模型、缝合和裁剪之间传递结果
  • 美化:18 个渐变、8 个网格渐变、纯色、壁纸或带有颗粒的模糊屏幕截图背景
  • macOS、Windows、浏览器(带 URL)、玻璃和轮廓窗框
  • 填充、带有自动边缘颜色的插图、圆角半径、5 种阴影样式、3D 透视倾斜和旋转
  • 社交画布预设:X post、Open Graph、LinkedIn、YouTube、Product Hunt、Dribbble、1:1、4:5、9:16 和自定义尺寸
  • 标题、副标题和水印文本、8 种快速样式、记忆样式和批量 ZIP 导出
  • 注释:基于对象的编辑器,您可以在其中选择、移动、调整大小、重新设计样式、复制、重新排序和删除标记
  • 锥形、经典和双箭头、矩形、椭圆、线条、文本标签、自动编号步骤和表情符号图章
  • 使用像素化、模糊或黑条进行编辑,全部烘焙到导出的像素中
  • 聚光灯、放大镜、高亮框、荧光笔和笔,带有撤消/重做和键盘快捷键
  • 设备模型:iPhone 16 Pro/15/SE、Pixel 9、Galaxy S24、iPad Pro/mini、Galaxy Tab、MacBook Air/Pro、iMac 和显示器
  • 六种设备外观、横向模式、屏幕眩光、3D 倾斜和 MacBook + iPad + iPhone 响应场景
  • 视口规划器,包含每个设备的 CSS 视口、像素比和本机屏幕截图尺寸
  • 代码到图像:19 种自动检测语言、10 种主​​题、行号、突出显示行、不同颜色、PNG 和 SVG
  • 通过像素精确的滚动重叠去除和粘性标题修剪,垂直、并排或网格缝合
  • 裁剪和清理:精确删除 iPhone/iPad 尺寸的状态栏和主页指示器、自动修剪边框、旋转和翻转
  • 以 1–4 倍导出 PNG、JPG 或 WebP 并直接复制到剪贴板,无水印且无需上传

如何使用截图工作室

  1. 1

    引入屏幕截图

    在 Capture 中捕获屏幕、窗口或选项卡,按 Ctrl/⌘+V 粘贴、拖入文件,或单击“尝试示例”。

  2. 2

    选择一种模式

    从选项卡中选择“美化”、“注释”、“模型”、“编码”、“缝合”或“裁剪和清理”。当您切换时,您在每种模式下的工作都会保留。

  3. 3

    编辑

    设置背景和框架的样式,绘制箭头、步骤和编辑,将镜头放入设备中,或者缝合和裁剪,所有这些都可以通过实时预览进行。

  4. 4

    连锁模式

    使用 Send to 对结果进行操作,例如 Capture → Crop & Clean → Annotate → Beautify。

  5. 5

    出口

    选择 PNG、JPG 或 WebP 以及 1–4 倍比例,然后下载或复制。一切都在您的设备上处理。

常见用例

  • 将普通屏幕截图变成带有渐变背景和标题的 X、LinkedIn 或 Product Hunt 帖子
  • 用箭头、编号步骤和经过编辑的个人数据注释错误报告
  • 使用突出显示的分步屏幕截图编写帮助中心和入门指南
  • 在 iPhone、iPad 和 MacBook 模型中显示应用程序或网站的登陆页面或作品集
  • 在社交媒体、幻灯片或文档中将代码片段作为主题图像共享
  • 将长滚动页面或聊天内容拼接到一张图像中,不重复行
  • 清理 App Store 和评论图像中的手机屏幕截图中的状态栏和主页指示器
  • 为发行说明和变更日志创建前后比较和网格

详细指南

美化:一键截图即可社交化

Beautify 将简单的屏幕截图包装在精美的卡片中。选择 18 个渐变、8 个网格渐变、纯色、您自己的壁纸或屏幕截图本身的模糊副本之一,然后设置内边距、角半径、插图、阴影、3D 倾斜和旋转。 Canvas 预设会根据每个平台准确调整结果大小,标题、副标题和水印可将屏幕截图转换为完成的帖子。浏览器会记住您的样式,Batch 会立即将其应用于许多屏幕截图并下载 ZIP。

预设输出尺寸最适合
X 帖子1600 × 900 px推文和话题
原始图像1200 × 630 px链接预览(打开图)
领英1200 × 627 pxLinkedIn 链接和摘要帖子
YouTube1280 × 720 px视频缩略图
产品搜寻1270 × 760 px启动图库图像
运球1600 × 1200 px设计镜头
1:1 · 4:5 · 9:16截图比例Instagram 动态、肖像帖子、故事和卷轴

像桌面屏幕截图编辑器一样进行注释

注释编辑器是基于对象的:每个箭头、框、标签或模糊都保持可编辑。选择任何标记来移动它、使用其手柄调整其大小、重新设置其样式、复制它或删除它。选择锥形、经典或双头箭头、轮廓、有色或实心形状,以及具有可在任何背景上阅读的对比轮廓的文本标签。编号的步数徽章会自动计数。编辑(像素化、模糊或实心黑条)被写入导出的像素中,因此隐藏的文本不会保留在文件中。聚光灯会使除您希望人们看到的区域以外的所有区域变暗,并且放大镜会放大一个小细节。该编辑器具有完整的撤消和重做功能,以及仅修剪导出的裁剪工具。

工具捷径用它来
选择/移动V移动、调整大小、重新设计样式或删除任何注释
箭A指向按钮或设置(Shift 捕捉到 45°)
矩形/椭圆形R / O框定一个区域(Shift 绘制正方形或圆形)
文本T标签和标题,Shift+Enter 换行
步骤数N编号演练可自行计数
模糊/编辑B像素化、模糊或黑条电子邮件、按键和姓名
聚光灯S调暗除重要区域以外的所有内容
放大镜Z放大小的 UI 文本或图标
荧光笔/荧光笔/荧光笔H / M / P标记式强调和手绘笔记
表情符号/邮票E快速反应如✅❌⚠️
庄稼C修剪导出的图像而不丢失注释

向任何图像添加样式文本或标题共享前删除隐藏的 EXIF 元数据

设备模型和视口规划器

模型模式会在屏幕截图周围绘制真实的设备框架:带动态岛的 iPhone 16 Pro、iPhone 15 和 15 Pro Max、带主页按钮的 iPhone SE、带打孔摄像头的 Pixel 9 和 Galaxy S24、iPad Pro、iPad mini 和 Galaxy Tab、MacBook Air、MacBook Pro、iMac 和台式显示器。它有六种饰面、纵向和横向、可选的屏幕眩光、3D 倾斜以及同时显示 MacBook、iPad 和 iPhone 的响应式场景。对于每个设备,视口规划器都会显示真实的 CSS 视口、设备像素比和本机屏幕截图大小,并在屏幕截图的形状与屏幕不匹配时向您发出警告。

设备CSS 视口像素比原生截图
iPhone 16 专业版402 × 8743×1206 × 2622
iPhone 15 / 15 专业版393 × 8523×1179 × 2556
iPhone 15 Pro 最大430 × 9323×1290 × 2796
iPhone SE375 × 6672×750 × 1334
谷歌像素 9412 × 9232.625×1082 × 2423
三星 Galaxy S24360 × 7803×1080 × 2340
iPad Pro 11英寸834 × 11942×1668 × 2388
MacBook Air 13英寸1470 × 9562×2940 × 1912
MacBook Pro 14 英寸1512 × 9822×3024 × 1964

代码到图像:免费的 Carbon 风格代码屏幕截图生成器

粘贴代码片段和“代码到图像”会将其呈现为干净、可共享的图像。它自动检测 19 种语言,包括 JavaScript、TypeScript、JSX、Python、HTML、CSS、JSON、SQL、Go、Rust、Java、Kotlin、Swift、C/C++、C#、PHP、Ruby、YAML 和 shell。您可以从 10 个编辑器主题中进行选择(Dracula、One Dark、Tokyo Night、Night Owl、Monokai、Nord、GitHub Dark and Light、Solarized Light 和 Paper)。行号、自定义起始行、突出显示的行和红/绿差异着色使其对于文档和代码审查非常有用,并且 macOS 或 Windows 标题栏显示文件名。导出高达 4 倍的 PNG 以获得清晰的社交帖子,或导出矢量 SVG,其文本在任何尺寸下都保持清晰。

拼接滚动屏幕截图并清理手机捕获的内容

Stitch 可以垂直、并排或以网格形式合并屏幕截图。对于滚动捕获,它会逐像素比较相邻的镜头并删除它们重复的行,您可以剪切粘性页眉或页脚并微调每个接缝。标签可以快速进行前后比较。 Crop & Clean 可识别常见的 iPhone 和 iPad 屏幕截图尺寸,并删除该型号的确切状态栏和主页指示器。对于 Android 手机,它会估计条形并捕捉到最近的实际边缘。它还可以自动修剪空边框,并具有纵横比预设、像素精确的裁剪字段、旋转和翻转。

将最终图像调整为精确尺寸将屏幕截图转换为 WebP、JPG 或 PNG

常见问题

如何给截图加背景美化?

打开美化并放置、粘贴或捕获屏幕截图。选择渐变、网格、纯色、壁纸或模糊背景,调整填充、角半径、阴影和 3D 倾斜,添加 macOS、Windows 或浏览器框架(如果您愿意),并以 1-4 倍导出 PNG、JPG 或 WebP。

如何将多个屏幕截图拼接到一张图像中?

打开 Stitch,按顺序添加屏幕截图(拖动以重新排序),然后选择垂直、并排或网格。对于滚动捕获,智能重叠去除会剪切每个镜头重复的行;您还可以修剪粘性页眉或页脚并手动调整每条接缝。

我可以从屏幕截图中删除手机边框和状态栏吗?

是的。 Crop & Clean 可识别常见的 iPhone 和 iPad 屏幕截图尺寸,并一键删除该型号的确切状态栏和主页指示器。对于 Android,它会估计条形并捕捉到最近的边缘,并且自动修剪会删除空边框或信箱边框。

如何使用箭头和数字注释屏幕截图?

在注释中,按 A 表示箭头,按 N 表示自动编号步骤标记,按 T 表示文本标签,按 R 表示框。每个标记都保持可编辑状态:切换到“选择”(V) 可对其进行移动、调整大小、重新设计样式、复制或删除,并可完全撤消和重做。

如何模糊或编辑屏幕截图的敏感部分?

按 B,选择像素化、模糊或黑条,然后拖动电子邮件、名称或 API 密钥。密文被烘焙到导出的像素中,因此原始文本不会存储在文件中。使用黑条作为密码和秘密。

什么是变焦放大镜?什么时候应该使用变焦放大镜?

放大镜 (Z) 是一个圆形放大镜,可显示小细节的放大副本,例如微小的设置、图标或错误消息,因此观看者无需打开全尺寸图像即可阅读。

Viewport Planner 如何帮助响应式 QA?

在 Mockup 中,每个设备都会显示其真实的 CSS 视口、设备像素比和本机屏幕截图大小,并在屏幕截图的形状不匹配时发出警告。在浏览器的设备工具栏中捕获这些数字,以获得像素完美的配合。

有水印还是需要帐户?

不需要。Screenshot Studio 是免费的,不添加水印,无需注册。

我的屏幕截图是否上传到服务器?

不会。捕获、编辑和导出全部通过 Canvas API 在浏览器中本地进行。图像仅在您的会话中保留在内存中,并且绝不会发送到任何地方。

如何制作带有背景的漂亮屏幕截图?

使用 Beautify 的快速样式(干净、午夜、玻璃、3D 倾斜、X 柱、残酷、模糊或最小)一键完成外观,然后微调背景、框架和阴影。

我可以创建样式漂亮的代码屏幕截图吗?

是的。打开代码,粘贴您的代码片段,系统会自动检测语言。选择主题、窗口样式、背景和线条选项,然后导出 PNG 或矢量 SVG。

这是代码图像 Carbon 的免费替代品吗?

是的。 Code to Image 的功能与 Carbon 或 ray.so 相同,有 10 个主题、19 种语言、行突出显示、差异颜色和 PNG/SVG 导出。它在您的浏览器中运行,无需注册,也没有水印。

我可以直接从这个网站截图吗?

是的,在桌面版 Chrome、Edge、Firefox 和 Safari 上。打开 Capture,可选择设置 3、5 或 10 秒的延迟,然后在浏览器的选择器中选择屏幕、窗口或选项卡。拖动结果以保留一个区域,然后将其发送到任何模式。手机和平板电脑不允许网页截取屏幕,因此请在设备上截取屏幕截图并粘贴或上传。

我可以粘贴屏幕截图而不是上传吗?

是的。复制屏幕截图(例如使用 Win+Shift+S、Cmd+Ctrl+Shift+4 或 Print Screen),然后在页面上的任意位置按 Ctrl/⌘+V。它会以您正在使用的模式打开。

社交媒体屏幕截图应该使用什么尺寸?

使用 Beautify 的画布预设:X post 1600 × 900、Open Graph 1200 × 630、LinkedIn 1200 × 627、YouTube 1280 × 720、Product Hunt 1270 × 760、Dribbble 1600 × 1200 或 Instagram feed、肖像和故事的 1:1、4:5 和 9:16 比例。

如何将屏幕截图放入 iPhone 或 MacBook 模型中?

打开模型,放入屏幕截图并选择一个设备。它会根据图像的形状自动建议手机、平板电脑或笔记本电脑。选择饰面、纵向或横向、背景、阴影和倾斜,或切换到响应式设置以同时显示 MacBook、iPad 和 iPhone。

我可以对许多屏幕截图应用相同的样式吗?

是的。在美化中设置样式,单击“批量”并选择任意数量的屏幕截图。每一个都使用相同的背景、框架、阴影和大小进行渲染,并且它们作为 ZIP 一起下载。

支持哪些导出格式和分辨率?

PNG(保持透明度)、JPG 和 WebP,带有质量滑块,尺寸为 1×、2×、3× 或 4×,具体取决于模式。 Code to Image 还可以导出矢量 SVG。非常大的结果会自动缩放以保持在浏览器画布限制之内,并且该工具会在发生这种情况时告诉您。

来自杂志

All articles →