@browserless/screenshot

@browserles/截图:拿一个干净的截图任何网站.

见 截图区域 我们的网站有更多信息.

安装

使用 npm :

npm install @browserless/screenshot --save

关于

此软件包提供 高级截图抓取 带有智能默认,浏览器框架覆盖,梯度背景,以及自动代码语法突出. 它包着傀儡的 page.screenshot() 具有优化生产用途的特征.

这个软件包做什么

这个 @browserless/screenshot 软件包允许您 :

• 抓取截图 有设备模拟和智能等待
• 添加浏览器框架覆盖 (暗地或淡地主题)
• 应用梯度或图像背景 为社交媒体准备的图像
• 自动检测空白截图 重试,直到内容完成
• 语法高亮代码 (JSON,文本)与Prism.js主题
• 获取特定要素 使用 CSS 选择器
• 全页截图 有懒惰内容支持

使用量

const createScreenshot = require('@browserless/screenshot')
const createGoto = require('@browserless/goto')

const goto = createGoto({ timeout: 30000 })
const screenshot = createScreenshot({ goto })

// With browserless
const browserless = await browser.createContext()
const buffer = await browserless.screenshot('https://example.com')

// With overlay
const buffer = await browserless.screenshot('https://example.com', {
  overlay: {
    browser: 'dark',
    background: 'linear-gradient(45deg, #FF057C 0%, #8D0B93 50%, #321575 100%)'
  }
})

选项

全体 Puppeteer 页面.screw() 选项 被支持.

浏览器重叠

在您截图上添加一个浏览器框架, 用于擦亮外观 :

const buffer = await browserless.screenshot(url, {
  overlay: {
    // Browser frame theme: 'dark' or 'light'
    browser: 'dark',

    // Background: color, gradient, or image URL
    background: 'linear-gradient(225deg, #FF057C 0%, #8D0B93 50%, #321575 100%)',

    // Margin around the screenshot (default: 0.2 = 20%)
    margin: 0.2
  }
})

背景选项

// Solid color
overlay: { background: '#c1c1c1' }

// CSS gradient
overlay: { background: 'linear-gradient(45deg, #12c2e9, #c471ed, #f64f59)' }

// Image URL
overlay: { background: 'https://picsum.photos/1920/1080' }

元素截图

捕获特定的 DOM 元素 :

const buffer = await browserless.screenshot(url, {
  element: '.hero-section'
})

// The package waits for the element to be visible
const buffer = await browserless.screenshot(url, {
  element: '#main-content'
})

全页截图

用懒惰内容抓取整个可滚动页面 :

const buffer = await browserless.screenshot(url, {
  fullPage: true
})

软件包自动 :

1. 等待DOM稳定
2. 通过页面滚动来触发懒惰的图像
3. 向上滚动
4. 拿着截图

代码语法突出显示

当反应是JSON或纯文本时,包会自动地用语法突出显示:

// Screenshot of a JSON API response
const buffer = await browserless.screenshot('https://api.example.com/data', {
  codeScheme: 'atom-dark'  // or any Prism.js theme
})

可用主题来自 自动马德-棱镜主题 财务报告和审定财务报表 棱镜主题。当两者中都存在一个主题时,则使用自动调试版本.

一些主题还提供轻/暗组合变体,将两种模式都捆绑在一个单一的CSS文件中,根据页面的暗模式类自动切换. 由于截图在不暗模式上下文的情况下渲染出,光变体将永远被使用——更喜欢像 github-light 或者说 github-dark 换句话说.

可用组合主题 :

智能内容检测

何时 waitUntil: 'auto' (默认),包:

1. 导航到页面
2. 等待字体加载
3. 在视图端口等待图像解码
4. 取一个截图
5. 如果截图是空白/ 白色的, 请重复等待

这保证了JavaScript-landed内容被完全装入.

实例

社交媒体卡

const buffer = await browserless.screenshot('https://example.com', {
  device: 'iPhone 13',
  overlay: {
    browser: 'light',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  }
})

API 文档截图

const buffer = await browserless.screenshot('https://api.example.com/docs', {
  fullPage: true,
  type: 'jpeg',
  quality: 85
})

具体构成部分

const buffer = await browserless.screenshot('https://example.com', {
  element: '[data-testid="pricing-table"]',
  type: 'png'
})

建筑

@browserless/screenshot
├── src/
│   ├── index.js            → Main screenshot logic with smart waiting
│   ├── is-white-screenshot.js → Blank screenshot detection using Jimp
│   ├── time-span.js        → Timing utility
│   ├── overlay/
│   │   ├── index.js        → Browser frame and background composition
│   │   ├── dark.png        → Dark browser frame
│   │   └── light.png       → Light browser frame
│   └── pretty/
│       ├── index.js        → Code content detection and rendering
│       ├── html.js         → HTML template for code display
│       ├── prism.js        → Prism.js syntax highlighter
│       └── theme.js        → Prism theme loader
└── test/
    └── index.js            → Tests

如何适合在单体

这是一个 核心功能软件包 用于截图抓取 :

依赖关系

许可证

@ browser/ 截图 © 微链接,在 麻省理工学院 执照.
作者和维护者 微链接 由来自 捐助者。 。 。 .

这个 标志 设计由 辛赫工作室。 。 。 .

微链接.io • GitHub 软件 微链克 • X @microlinkhq (英语)