网站截图

URL→PNG/全屏/移动端模拟

417 次访问

网页 / 屏幕截图

浏览器内截屏 + Puppeteer 部署方案

使用浏览器原生 getDisplayMedia() API,授权后可截取整个屏幕 / 应用窗口 / 浏览器标签页。 支持 Chrome 72+ / Firefox 66+ / Safari 13+。

· 点击按钮 → 浏览器弹出选择框 → 选"整个屏幕 / 窗口 / 标签页"
· 截图后立即抓取一帧并显示预览,可下载 PNG
· 注意:HTTPS 站点才能调用该 API(本工具已在 HTTPS 下)

需要批量 / 任意 URL / 长截图时,用 Node.js + Puppeteer 服务端方案

安装

npm install puppeteer # 国内镜像(避免下载 Chromium 失败): PUPPETEER_DOWNLOAD_HOST=https://npmmirror.com/mirrors npm install puppeteer

截图脚本

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080 }); await page.goto('https://example.com', { waitUntil: 'networkidle2' }); // 全屏长截图 await page.screenshot({ path: 'screenshot.png', fullPage: true }); // 特定元素截图 const el = await page.$('.hero'); await el.screenshot({ path: 'hero.png' }); await browser.close(); })();

移动端模拟

const iPhone = puppeteer.devices['iPhone 13']; await page.emulate(iPhone); await page.goto('https://example.com'); await page.screenshot({ path: 'mobile.png' });

常用参数

· fullPage: true 长截图(整页滚动)
· waitUntil: 'networkidle2' 等所有请求空闲
· clip: { x, y, width, height } 截取区域
· type: 'jpeg', quality: 80 JPG 压缩

在线 API(付费)

ScreenshotMachine · URL2PNG · UrlBox · Screenshotapi.net
通常有免费额度,适合不想自建的场景

浏览器扩展(本地)

· FireShot:长截图 + 区域截图 + 标注
· GoFullPage:简单可靠的全屏长截图
· Awesome Screenshot:标注 + 录屏
· Chrome DevTools 内置Ctrl+Shift+P → "Capture full size screenshot"

命令行

# wkhtmltopdf(截 PDF / 图片) wkhtmltoimage https://example.com out.png # Playwright CLI npx playwright screenshot https://example.com out.png --full-page

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

📱

移动端适配检查

前端开发者或 QA 测试人员,在开发响应式网站时,需要快速确认页面在手机屏幕(如 iPhone 12 / 320px 宽度)下的布局是否错位、图片是否溢出、按钮是否可点击。本工具直接输入 URL 并选择「移动端模拟」,几秒内生成对应宽度的 PNG 截图,无需切换设备或打开开发者工具,大幅缩短「改代码 → 验证 → 再改」的迭代周期。

📸

竞品首页存档

产品经理或市场运营人员,想定期抓取竞品官网首页的全屏截图,用于版本对比或竞品分析报告。手动滚动截屏效率低且容易遗漏底部内容。本工具输入 URL 后一键生成全屏 PNG,包含从顶部导航到底部版权信息的完整页面,方便按月归档,回溯竞品改版历史。

🔍

Bug 复现留证

测试人员在反馈某个线上 Bug(如特定浏览器下页面样式错乱)时,需要一张「当前状态」的截图作为证据。直接截图可能被浏览器插件或本地缓存干扰。本工具通过后端无头浏览器渲染,生成纯净的、无本地干扰的 PNG 截图,确保截图与线上真实环境一致,提升 Bug 单的可信度。

📄

设计稿验收对照

UI 设计师交付设计稿后,开发人员需要验证还原度。手动截图再与设计稿叠图对比,流程繁琐。本工具直接将线上页面截为 PNG,设计师或开发可将其导入 Figma / Sketch 中与设计稿叠加,快速检查间距、字号、颜色等细节偏差,减少来回沟通成本。

📊

数据看板快照

数据分析师或团队管理者,每天需要查看某个内部数据看板(如 Grafana / Tableau)的截图,用于日报或晨会分享。手动截取多屏拼接费时且易出错。本工具输入看板 URL 后,自动生成全屏 PNG,包含所有图表和数据表格,支持定时任务或手动一键导出,提升日报制作效率。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (Screenshot Machine)传统方法 (浏览器开发者工具)
数据隐私纯浏览器处理,URL 不上传服务器URL 上传至云端服务器渲染本地浏览器,无网络传输
处理速度1-3 秒5-15 秒 (含排队)10-30 秒 (手动操作)
移动端模拟内置,一键切换需手动设置 User-Agent需手动调整视口尺寸
全屏截图自动滚动拼接,无需配置部分方案需额外付费需手动滚动并拼接截图
批量处理单次单张支持 API 批量 (付费)手动逐张操作
收费模式免费 (有限制)免费版有次数/水印限制完全免费
注册要求无需注册需注册账号无需注册

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
https://www.example.comexample.com_1280x800.png (全屏截图,宽度 1280px,高度按页面实际内容)典型场景:标准桌面端全屏截图
https://www.example.com (勾选移动端模拟)example.com_375x812.png (移动端截图,宽度 375px,高度按页面实际内容)典型场景:模拟 iPhone X 尺寸查看移动端适配
https://www.example.com (勾选移动端模拟,设备选 iPad)example.com_768x1024.png (移动端截图,宽度 768px,高度按页面实际内容)典型场景:模拟 iPad 横屏/竖屏截图
http://localhost:3000错误:无法访问本地地址。工具运行在服务端,无法连接内网或 localhost。边界 case:本地开发地址无法被服务端访问
https://jietu.tl654.com/jietu.tl654.com_1280x800.png (工具自身页面截图)边界 case:对工具自身截图,验证递归处理能力
https://www.example.com/very-long-path/very-long-path/very-long-path/very-long-path/very-long-path/very-long-path/very-long-pathvery-long-path..._1280x800.png (文件名截断,保留前 30 字符)易错 case:超长 URL 导致文件名过长,自动截断
https://www.example.com (页面含大量动态内容/无限滚动)example.com_1280x800.png (截图仅包含首屏可见内容,未触发滚动加载)易错 case:无限滚动页面只截首屏,非全量

常见错误对照9 个常踩的坑 · 错误 → 修复

1. 用 HTTP 页面测试 HTTPS 网站截图

错误
http://example.com
修复
https://example.com

现代网站强制 HTTPS,Headless 浏览器加载 HTTP 页面时若遇到 301/302 跳转到 HTTPS,截图可能只捕获到跳转前的空白或重定向页

2. 输入需要登录的 URL 但未携带 Cookie

错误
https://dashboard.example.com
修复
https://dashboard.example.com(需先确认工具支持 Cookie 注入或 session 传递)

后端截图使用无头浏览器,默认无登录态;访问需鉴权的页面只会得到登录页截图,而非目标内容

3. 用移动端模式截取桌面端专属页面

错误
选择移动端模拟 → 输入 https://www.figma.com
修复
选择桌面端模式 → 输入 https://www.figma.com

部分 Web 应用根据 User-Agent 返回不同 DOM 结构;移动端 UA 可能触发响应式布局或隐藏关键功能模块

4. 截图包含动态内容(图表/地图/轮播)

错误
https://www.google.com/maps
修复
https://www.google.com/maps(需确认工具是否支持等待特定元素加载或设置渲染延迟)

无头浏览器默认在 DOMContentLoaded 后截图,未等待 XHR/fetch 完成;动态图表、地图瓦片可能渲染不全

5. 截取全屏但页面高度超过工具限制

错误
https://www.verylongarticle.com(页面高度 50000px)
修复
https://www.verylongarticle.com(需提前了解工具最大截图高度,通常 10000-20000px)

后端截图引擎(如 Puppeteer/Playwright)有默认视口高度限制,超长页面会被截断或触发 OOM 导致截图失败

6. 输入非标准端口 URL 导致连接超时

错误
http://localhost:3000
修复
https://public-site.com

后端截图服务运行在服务器上,无法访问用户的 localhost 或内网 IP;这类请求会一直等待直到超时

7. URL 包含中文字符未做百分号编码

错误
https://example.com/商品/123
修复
https://example.com/%E5%95%86%E5%93%81/123

浏览器自动对地址栏输入做编码,但 API 调用或直接粘贴时未编码的中文会被视为非法字符,导致 400 错误

8. 用截图工具验证页面 SEO 元信息

错误
输入 https://example.com 查看截图中的 <title> 标签
修复
使用浏览器的「查看页面源代码」或 SEO 工具检查元数据

截图工具输出的是渲染后的像素图,无法提取 HTML 结构信息;页面标题、描述等元数据需通过 DOM 或 HTTP 响应头获取

9. 截取需要滚动加载的无限流页面

错误
https://www.instagram.com/explore
修复
https://www.instagram.com/explore(需确认工具是否支持自动滚动加载,多数不支持)

无限滚动依赖 Intersection Observer 或 scroll 事件触发;无头浏览器默认不模拟滚动,只能截取首屏内容

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

W = max( W_desktop, W_mobile )

变量说明

  • W — 截图画布宽度(像素)
  • W_desktop — 桌面端视口宽度(默认 1920px)
  • W_mobile — 移动端视口宽度(默认 375px)

示例

用户选择「全屏截图」模式,桌面端宽度 1920px,移动端宽度 375px。则 W = max(1920, 375) = 1920px。截图引擎以 1920px 宽度渲染整个页面,生成一张完整的长图(高度由页面内容决定)。

适用范围

适用于单页 URL 截图,不适用于需要登录/滚动加载/动态内容的页面(如无限滚动列表),此类页面可能截取不全。基于 Headless Chrome 渲染引擎(Chromium 标准视口)。

原理图

用户输入目标 URL后端处理Headless 浏览器渲染 & 截图输出结果PNG 图片移动端模拟视口 375×812用户输入全屏 / 移动端
用户输入 后端处理 输出结果

开发者集成

3 种主流语言 · 复制即用

import requests

# 使用 ScreenshotAPI 或类似服务截图
# 替换为实际 API key 和 URL
url = "https://example.com"
api_key = "your_api_key"

# 全屏截图(桌面端)
response = requests.get(
    "https://api.screenshotapi.io/capture",
    params={
        "url": url,
        "full_page": True,
        "viewport": "1920x1080",
        "api_key": api_key
    }
)

# 保存为 PNG
if response.status_code == 200:
    with open("screenshot.png", "wb") as f:
        f.write(response.content)
    print("截图已保存为 screenshot.png")
else:
    print(f"截图失败: {response.status_code}")

# 移动端模拟截图
response_mobile = requests.get(
    "https://api.screenshotapi.io/capture",
    params={
        "url": url,
        "full_page": False,
        "viewport": "375x812",  # iPhone X 尺寸
        "api_key": api_key
    }
)

if response_mobile.status_code == 200:
    with open("screenshot_mobile.png", "wb") as f:
        f.write(response_mobile.content)
    print("移动端截图已保存为 screenshot_mobile.png")
package main

import (
	"fmt"
	"io"
	"net/http"
	"os"
)

func main() {
	// 使用 ScreenshotAPI 或类似服务截图
	url := "https://example.com"
	apiKey := "your_api_key"

	// 全屏截图
	req, _ := http.NewRequest("GET", "https://api.screenshotapi.io/capture", nil)
	q := req.URL.Query()
	q.Add("url", url)
	q.Add("full_page", "true")
	q.Add("viewport", "1920x1080")
	q.Add("api_key", apiKey)
	req.URL.RawQuery = q.Encode()

	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		fmt.Println("请求失败:", err)
		return
	}
	defer resp.Body.Close()

	if resp.StatusCode == 200 {
		file, _ := os.Create("screenshot.png")
		defer file.Close()
		io.Copy(file, resp.Body)
		fmt.Println("截图已保存为 screenshot.png")
	} else {
		fmt.Printf("截图失败: %d\n", resp.StatusCode)
	}

	// 移动端模拟截图
	reqMobile, _ := http.NewRequest("GET", "https://api.screenshotapi.io/capture", nil)
	qMobile := reqMobile.URL.Query()
	qMobile.Add("url", url)
	qMobile.Add("full_page", "false")
	qMobile.Add("viewport", "375x812")
	qMobile.Add("api_key", apiKey)
	reqMobile.URL.RawQuery = qMobile.Encode()

	respMobile, _ := client.Do(reqMobile)
	defer respMobile.Body.Close()

	if respMobile.StatusCode == 200 {
		fileMobile, _ := os.Create("screenshot_mobile.png")
		defer fileMobile.Close()
		io.Copy(fileMobile, respMobile.Body)
		fmt.Println("移动端截图已保存为 screenshot_mobile.png")
	}
}
// 使用 Puppeteer 在 Node.js 中截图
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 设置移动端模拟
  await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15');
  await page.setViewport({ width: 375, height: 812 });

  // 访问页面
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });

  // 全屏截图(包含滚动区域)
  await page.screenshot({
    path: 'screenshot_full.png',
    fullPage: true
  });
  console.log('全屏截图已保存为 screenshot_full.png');

  // 视口截图(仅当前屏幕可见区域)
  await page.screenshot({
    path: 'screenshot_viewport.png',
    fullPage: false
  });
  console.log('视口截图已保存为 screenshot_viewport.png');

  await browser.close();
})();

常见问题

8 个高频疑问

这个网站截图工具怎么用?要下载安装吗?
不需要下载安装,完全在线使用。打开工具页面后,在输入框粘贴完整网址(以 http:// 或 https:// 开头),点击「截图」按钮,几秒后就能看到生成的 PNG 图片预览。支持三种截图模式:桌面全屏(模拟 1920×1080 浏览器窗口)、移动端模拟(iPhone/Android 尺寸)、以及自定义视口宽度。截图完成后可以右键保存图片或复制链接。注意:某些需要登录或验证码的页面无法截图,因为工具只访问公开内容。
为什么截出来的图和我自己在浏览器里看到的不一样?比如字体、排版错乱?
这个工具是在后端无头浏览器(Headless Chrome)中渲染页面的,没有安装任何中文字体,所以依赖系统字体的中文页面会回退到默认无衬线体,导致排版偏移。另外,如果页面使用了 CSS 媒体查询(比如 <link media="print"> 的样式),截图时可能被错误应用。解决方法:1)截全屏模式比移动端模式更接近桌面浏览器效果;2)对字体敏感的设计类页面,建议用本地浏览器手动截图。
截的图会不会包含我的个人信息或登录状态?
不会。工具的后端无头浏览器每次启动都是全新的、干净的实例,不携带任何 Cookie、LocalStorage 或浏览器缓存。截图时相当于一个从未访问过该网站的新用户打开页面,不会带上你的登录态。如果页面有登录后可见的内容(如后台管理面板、个人中心),截图结果是未登录状态下的页面。建议不要用这个工具截取包含敏感信息的页面,因为即使不保存,截图文件也会在服务器短暂驻留几秒后自动删除。
截长网页(需要滚动的那种)能截完整吗?最多支持多长?
桌面全屏和移动端模式都能自动滚动截取完整页面,但受限于后端超时限制(默认 30 秒)和内存限制,超长页面(比如无限滚动加载的新闻流、几万行的表格)可能只截取到前几屏内容。实测大多数普通文章页、产品详情页、个人主页都能完整截取。如果遇到截断,可以尝试用自定义高度模式手动指定截图高度(比如 8000px),但过高的截图文件(超过 20MB)浏览器可能无法正常预览。
这个工具和浏览器自带的截图(比如 Chrome 的截图功能)有什么区别?
区别主要在两点:1)全页截图:浏览器自带截图只能截当前可视区域,想截长网页需要插件或 DevTools 命令;本工具一键自动滚动拼接,适合快速保存整页内容。2)移动端模拟:本工具可以模拟 iPhone/Android 设备屏幕尺寸和 User-Agent,看到页面在手机上的真实渲染效果,浏览器自带截图做不到。缺点是延迟较高(后端渲染需 3-8 秒),且无法截图需要交互(如点击展开、悬停弹出)的页面。
截图时提示「无法访问该网址」或「加载超时」怎么办?
常见原因及解决方法:1)网址拼写错误或缺少协议头——确保输入的是完整 URL(如 https://example.com,不要只写 example.com)。2)网站本身无法访问——可以先在本地浏览器打开确认。3)网站有反爬机制或 Cloudflare 验证——这类页面会被无头浏览器拦截,无法截图。4)网站是内网地址(如 192.168.x.x)或 localhost——工具部署在公网服务器,无法访问你的局域网资源。5)页面过于复杂(大量图片/视频/脚本)导致超时——可以尝试关闭网络后重试,或换个简单页面测试是否正常。
每天有使用次数限制吗?截的图能不能商用?
目前没有每日次数限制,可以自由使用。但注意:1)后端资源有限,如果短时间内大量并发请求(比如每秒几十次),可能会触发限流,建议正常频率使用。2)截图文件仅临时保存在服务器内存中,预览后请及时下载保存,关闭页面后无法恢复。3)商用方面:工具只负责生成截图,不拥有截图内容的版权。截图内容版权归原网站所有,是否可用于商用取决于原网站的条款(比如截取开源项目文档通常没问题,截取付费素材网站的内容可能侵权)。
截移动端页面时,能选具体是哪款手机型号吗?
目前支持两种移动端模拟模式:通用 iPhone 尺寸(375×812,对应 iPhone X/XS/11 Pro 等)和通用 Android 尺寸(412×915,对应主流 1080p+ 屏幕)。不提供具体机型的精准模拟(比如 iPhone 15 Pro Max 的 430×932 或三星 Galaxy S24 的 393×851),因为不同机型的屏幕比例、状态栏高度、圆角对页面布局的影响极小,主要差异在视口宽度。如果需要精确模拟某款机型,可以手动在自定义宽度/高度输入框中填入该机型的逻辑分辨率(非物理像素)。
选择 打开 +新窗口 esc关闭