实现完整网页保存为图片的方法

是Vzn呀

发布于 2022-07-14 09:05:14

3.1K00

代码可运行

文章被收录于专栏：架构悟道架构悟道

运行总次数：0

代码可运行

业务场景中，会存在某些场景需要将网页内容快照保存下来的场景。因为有些网页内容是联网异步获取的，所以爬虫保存html页面的方式无法保证后续数据与此前的一致性，因此将网页内容以图片保存下来，是一种简单而直接的思路。本文档即针对上述诉求的技术可行性进行论证，并给出可行的技术实现手段。

整体阐述

按照前面提出的思路，一种简单的业务处理场景可以抽象为如下的模型：

主机服务器上部署一个服务，从来源处获取到 url 信息，然后请求此 url 内容并生成截图保存在文件服务器中，可以在数据库中保存此图片与 url 的映射关系，便于后续查找。

下面主要阐述下如何实现根据 url 生成其对应内容全量截图（图中蓝色部分）。本文中主要提供了2种可选的实现方案，分别是:

通过 PhantomJS 方式
通过Chrome headless 方式

需要说明的是，在GitHub 上显示 PhantomJS 已经暂停维护了。仅从URL截图这一个诉求来分析的话，已有版本是完全满足要求的、且实现上更简单。如果有更多方面的考量，可以优选Chrome headless方案。

网页截图技术方案

通过 PhantomJS 实现

PhantomJS是一个基于webkit的JavaScript API。作为一个免费且开源的工具，支持Windows/Linux/Mac等多平台上运行，且可以通过JAVA/Python/bat/sh等方式进行调用。

以Windows平台为例，PhantomJS提供了一个exe文件，可以通过在JAVA或者Python中进行简单的封装调用即可，下面对其用法进行简单介绍。编写其js脚本如下：

var page = require('webpage').create();
page.open(url, function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render(pic_name);
  }
  phantom.exit();
});

则在cmd窗口中，执行phantomjs.exe screenshot.js命令，则会将js中指定的url页面内容生成图片并保存在指定的位置。

在工程中调用PhantomJS的用法如下：

JAVA实现

JAVA工程中可以通过拼接命令并调用exe文件执行抓取操作来实现。考虑先准备一份js模板，然后代码中处理替换掉js模板中的url和pic_name字段，并调用phantomjs.exe screenshot.js命令完成图片抓取。

代码DEMO片段如下：

/**
* 将url内容转换为png图片保存
 * @param url 目标url地址
 * @param pngSavePath 图片保存位置
 */
public static void convertHtml2Png(String url, String pngSavePath) {
  // 读取js模板
  String templateJsContent = FileUtil.readFile("Template.js", "utf-8");
  // 将js模板中的url和图片路径占位符全部替换为实际的
  String realJsContent = templateJsContent
      .replace("url", "'" + url + "'")
      .replace("png_name", "'" + pngSavePath + "'");
  String realJsTempPath = "./tmp/" + UUID.randomUUID().toString() + ".js";
  // js内容写入临时文件
  FileUtil.writeFile(realJsTempPath, realJsContent);

  // 拼接cmd命令并执行
  String cmd = "phantomjs.exe " + realJsTempPath;
  try {
    Runtime.getRuntime().exec(cmd);
  } catch (Exception e) {
    // ...
  }

  // 删除js临时文件
  new File(realJsTempPath).deleteOnExit();
}

此方案需要安装相关环境信息如下：

JDK
PhantomJS

Python实现

Python中结合selenium和PhantomJS可以轻松实现页面全图截取，代码DEMO演示如下：

from selenium import webdriver
import os

driver = webdriver.PhantomJS()

urls = open("urls.txt") 
for url in urls:
    driver.get(url)
    driver.save_screenshot(str(hash(url)) + '.png')

driver.close()

此方案需要安装相关环境信息如下：

Python（含selenium库）
PhantomJS（.exe放到python安装目录script目录下）

通过Chrome headless模式实现

如前面所述，PhantomJS在根据url生成图片方面已经满足要求了，但是PhantomJS目前暂停更新了。且在高版本的python selenium中已经将PhantomJS标记为deprecated并推荐使用chrome headless方式来替代。

所谓headless模式，也即无UI模式，在不打开chrome浏览器窗口的情况下，在后台进行无界面处理。

下面介绍下在python中通过chrome headless进行url全图保存的实现方式。参考如下的DEMO代码片段：

from selenium import webdriver
import os
import time
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
chrome_options.add_argument('--start-maximized')

urls = open("urls.txt") 
for url in urls:
    driver = webdriver.Chrome(executable_path='chromedriver.exe', chrome_options=chrome_options)
    driver.get(url)
    # Get the actual page dimensions using javascript
    width = driver.execute_script("return Math.max(document.body.scrollWidth,document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);")   
    height = driver.execute_script("return Math.max(document.body.scrollHeight, document.body.offsetHeight,document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);")
    #resize
    driver.set_window_size(width,height)
    time.sleep(1)
    driver.save_screenshot(str(hash(url)) + '.png')
    driver.quit()

因为通过chrome headless的方式进行截图的时候，默认只截取当前显示屏幕区域。因此如果需要截取网页全部内容，便需要进行额外的处理（如上述代码中红色标识的代码片段）。在python中通过执行js语句，计算出网页真实的width和height值，然后对页面resize操作使其展示全部大小，之后再进行截图就可以保存整个网页了。