Nodejs 做网页截屏的问题

Nodejs 做网页截屏的问题

最开始是用https://github.com/Skullbock/screenshot-nodejs 去做的， 他是基于snapito，后来发现速度会很慢。

所以就想用phantomjs做截屏。

然后在github找到一个模块https://github.com/brenden/node-webshot 但不知道什么原因，照着上面的API弄，一直不成功。。。 不知道是因为他的代码有问题，还是我这边的问题。。调试了好久，还是找不到原因。愁死了。。

有经验的同学麻烦帮我看下。 或者有更好的截屏方法~~

11 回复

Node.js 网页截屏问题

问题描述

最初尝试使用 screenshot-nodejs 来实现网页截屏功能，但发现其速度较慢。因此转而考虑使用 PhantomJS 进行网页截屏，并找到了一个名为 node-webshot 的库。然而，在使用过程中遇到了一些问题，尽管参照官方文档进行配置，仍然无法正常工作。经过多次调试仍未能解决问题。

解决方案

可以尝试使用 puppeteer 库来替代 node-webshot，因为 puppeteer 是一个更现代、更稳定的选择。puppeteer 基于 Chrome 浏览器，提供了丰富的 API 用于自动化操作，包括网页截屏。

示例代码
const puppeteer = require('puppeteer');

async function captureScreenshot(url, outputFilePath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // 导航到指定 URL
    await page.goto(url);

    // 截取全屏截图
    await page.screenshot({ path: outputFilePath });

    // 关闭浏览器
    await browser.close();
}

// 使用函数
captureScreenshot('https://example.com', 'screenshot.png')
    .then(() => console.log('截图完成'))
    .catch(err => console.error('截图失败:', err));

解释

  1. 安装 Puppeteer: 首先需要通过 npm 安装 puppeteer：

    npm install puppeteer

  2. 启动浏览器: 使用 puppeteer.launch() 方法启动一个新的浏览器实例。

  3. 创建新页面: 使用 browser.newPage() 创建一个新的页面实例。

  4. 导航到目标网址: 使用 page.goto(url) 方法导航到指定的 URL。

  5. 截取屏幕: 使用 page.screenshot() 方法将当前页面保存为图片文件。该方法接受一个对象作为参数，其中包含输出文件路径等信息。

  6. 关闭浏览器: 最后使用 browser.close() 方法关闭浏览器实例，释放资源。

通过这种方式，你不仅可以解决之前遇到的问题，还可以获得更好的性能和稳定性。希望这个解决方案能帮助你顺利实现网页截屏的功能！


果断phantomjs啊

phantomjs很好用，但是注意要和nodejs配合使用的话使用node.js 0.8.4 + Phantom1.9。 node.js 0.10.4 + [Phantom1.6 ~ Phantom1.9]有bug

phantomjs 正解

这个我测了一下 感觉 node.js + html2image 截图速度要快些呢！

phantomjs 折腾了下，，感觉没说的那么好用。。。 找用nodejs操作phantomjs的包都找了好几个，试了phantomjs和phantom这两个包都不怎么好用。而且安装各种报错。说明文档写的也不清楚。

最后才找了个node-phantom，勉强还可以。。

但phantomjs本身也有很多BUG。。他的viewportSize这个属性根本就没起到作用。 而且phantomjs也不能生成缩略图，很不方便啊。。

如果我要截取一个页面，并保存为错缩略图 用什么好呢?

phantomjs生成原始截图后用imagemagick里的工具做缩略图呗

phantomjs有不许要安装的包 http://phantomjs.org/download.html 立马可用的

不是这个问题，是phantomjs可以截图，但是不能对图片进行缩放。。他有zoomFactor这个缩放属性，但只针对网页的，有很多网页一缩放就变形了，截屏下来也就没意义了。。所以要先截屏，保存为图片，然后再对图片进行缩放。。 但phantomjs没这功能~~~真纠结。

楼主的需求看似比较复杂啊，一般都phantomjs

针对使用 Node.js 进行网页截屏的需求，可以尝试使用 puppeteer 库，它基于 Chrome 浏览器，功能强大且性能较好。以下是如何使用 puppeteer 来实现网页截屏的一个简单示例：

  1. 首先需要安装 puppeteer 库。可以通过 npm 安装：

    npm install puppeteer

  2. 创建一个简单的脚本文件，例如 screenshot.js，并添加以下代码：

    const puppeteer = require('puppeteer');

(async () => {
  // 启动一个新的浏览器实例
  const browser = await puppeteer.launch();
  // 打开一个新的页面
  const page = await browser.newPage();
  
  // 设置用户代理（可选）
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36');
  
  // 导航到目标网址
  await page.goto('http://example.com', { waitUntil: 'networkidle2' });
  
  // 截取全页截图
  await page.screenshot({ path: 'example.png', fullPage: true });

  // 关闭浏览器
  await browser.close();
})();

这段代码首先启动了一个新的 Puppeteer 浏览器实例，并导航到了指定的网页，然后截取整个页面的屏幕截图，并保存为 example.png 文件。最后关闭浏览器。

与之前提到的方法相比的优势：

  • 稳定性：Puppeteer 是由 Google 维护的项目，因此相对稳定且维护良好。
  • 灵活性：不仅可以截取网页，还可以执行其他自动化任务，如表单提交、页面点击等。
  • 性能：相对于使用 PhantomJS 的方法，Puppeteer 在性能上更有优势。

希望这能帮助您解决网页截屏的问题！

回到顶部