Java根据URL截图的4种方式

河曲智叟  金牌会员 | 2023-12-7 01:51:22 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 908|帖子 908|积分 2724

方案选择


  • XHTMLRenderer（不要用）
  • PhantomJs（三方库，已停更）
  • Puppeteer（Chrome团队开发和维护）
  • Selenium（支持多浏览器、多语言，服务器需要安谷歌浏览器）
一、XHTMLRenderer（不要用）


  • XHTMLRenderer它是一个Java库，用于将XHTML文档渲染为图像或PDF格式。
  • 也不要用它来转PDF
1、XHTMLRenderer介绍

XHTMLRenderer（也被称为Flying Saucer）是一个用于将XHTML和CSS内容渲染为PDF或图像的库。然而，它的一个主要限制是它只支持一部分的CSS 2.1规范，并且不支持HTML5和CSS3的许多特性。这意味着如果您的HTML内容使用了这些库不支持的特性，那么它可能无法正确地渲染这些内容。
此外，XHTMLRenderer需要输入的HTML内容是良好的XHTML。这意味着所有的标签都必须正确地关闭，属性值必须用引号括起来，等等。如果输入的HTML内容不符合这些规则，那么XHTMLRenderer可能无法正确地解析它。
如果您发现XHTMLRenderer无法满足您的需求，您可能需要考虑使用其他的库。
例如，PhantomJS（第二种）、Selenium（终极办法）、Puppeteer可以在无头浏览器环境中渲染HTML，并且支持最新的HTML和CSS规范。这些库可以更好地处理复杂的HTML内容，并且提供了更多的选项来控制渲染过程。
2、适用场景


  • 简单的可以解析的html
  • 不适用：复杂的网页生成的html
3、实现

3.0导包

  • gradle
  1.     implementation 'org.jsoup:jsoup:1.15.3'
  2.     // XHTMLRenderer 的核心包
  3.     // - 用于将XML、XHTML和CSS文档渲染为PDF、图像或Swing组件。
  4.     // - 它基于W3C标准和开放源代码的浏览器引擎，可以将HTML文档转换为可打印或可展示的格式。
  5.     implementation 'org.xhtmlrenderer:flying-saucer-core:9.1.18'
复制代码
3.1、通过JSOUP获取url的html
  1. Jsoup是一个Java库，用于处理HTML。它提供了一个非常方便的API，用于提取和操作数据，使用DOM，CSS和jquery-like方法。
  3. Jsoup的主要功能包括：
  5. 1. 从URL、文件或字符串中解析HTML。
  6. 2. 使用DOM和CSS选择器来查找、提取和操作数据。
  7. 3. 清理用户提交的内容，以防止跨站脚本攻击。
  8. 4. 输出整洁的HTML。
  10. Jsoup设计用于处理所有类型的HTML：从整洁的HTML5到混乱的实际生产HTML。
  11. Jsoup会将输入HTML解析为与浏览器相同的DOM结构，这使得它能够处理各种复杂的HTML结构。
复制代码

  • jsoup获取url的html
  1. package com.cc.urlgethtml.utils;
  3. import lombok.Data;
  4. import org.jsoup.Jsoup;
  5. import org.jsoup.nodes.Document;
  7. import java.io.IOException;
  9. /**
  10. * <p></p>
  11. *
  12. * @author CC
  13. * @since 2023/11/6
  14. */
  15. @Data
  16. public class JsoupUtils {
  18.     public static String getHtmlByJsoup(String url) {
  19.         Document doc;
  20.         try {
  21.             doc = Jsoup.connect(url).get();
  22.         } catch (IOException e) {
  23.             throw new RuntimeException(e);
  24.         }
  25.         return doc.html();
  26.     }
  27. }
复制代码
3.2、使用XHTMLRenderer
  1. /** <p>通过Java2DRenderer将html转为图片</p>
  2.      * <ol>
  3.      *     <li>通过jsoup根据url获取静态html</li>
  4.      *     <li>使用Java2DRenderer将静态html转为图片，浏览器下载</li>
  5.      * </ol>
  6.      *
  7.      * <li>优点：不用第三方插件。如果是标准的html页面，可以使用该方式</li>
  8.      * <li>缺点：复杂的html转不了，直接会报错</li>
  9.      */
  10.     @GetMapping("/getJava2DRenderer")
  11.     public String get1(HttpServletResponse response){
  13.         //url
  14.         String url = "http://www.baidu.com";
  15.         //一、通过jsoup获取url的html（获取的html不完整，而且是渲染前的）
  16. //        String html = JsoupUtils.getHtmlByJsoup(url);
  18.         //二、模拟从url获取的：非常简单的html。测了从富文本中获取的html有可能都识别不了。恶心。
  19.         String html = "<html><body><h1>Hello, World!</h1></body></html>";
  20.         String fileName = "文件名.png";
  22.         //转图片，有问题——复杂的html转不了
  23.         Document document;
  24.         try {
  25.             DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
  26.             document = builder.parse(new ByteArrayInputStream(html.getBytes()));
  27.         } catch (Exception e) {
  28.             throw new RuntimeException(e);
  29.         }
  31.         Java2DRenderer renderer = new Java2DRenderer(document, 480, 640);
  32.         BufferedImage img = renderer.getImage();
  34.         //方式一：浏览器下载
  35.         try {
  36.             response.setCharacterEncoding(StandardCharsets.UTF_8.name());
  37.             response.setContentType("image/png;charset=".concat(StandardCharsets.UTF_8.name()));
  38.             response.setHeader(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS,HttpHeaders.CONTENT_DISPOSITION);
  39.             response.setHeader(HttpHeaders.CONTENT_DISPOSITION,
  40.                     "attachment; filename=".concat(
  41.                             URLEncoder.encode(fileName, StandardCharsets.UTF_8.name())
  42.                     ));
  43.             ServletOutputStream out = response.getOutputStream();
  45.             //把 BufferedImage 缓冲图像流 写到 输出流 out 中
  46.             ImageIO.write(img, "png", out);
  47.             out.close();
  48.         }catch(Exception e){
  49.             throw new RuntimeException(e.getMessage());
  50.         }
  52.         //方式二：写入本地
  53.         /*FSImageWriter imageWriter = new FSImageWriter();
  54.         try {
  55.             imageWriter.write(img, "D:\\ABC.jpg");
  56.         } catch (IOException e) {
  57.             throw new RuntimeException(e);
  58.         }*/
  60.         return html;
  61.     }
复制代码

  • 截图

二、PhantomJs（我用的）


  • 我使用的，已经停更，建议使用Puppeteer
  • 是三方插件，需要使用Java调用三方插件
  • 需要下载这个插件，下载地址：https://phantomjs.org/download.html
  • 我用的版本：2.2.1
  • Windows、Linux都实现了
1、PhantomJs介绍

PhantomJS是一个无头浏览器，它使用WebKit布局引擎（与旧版的Safari和Google Chrome相同）进行页面渲染。"无头"意味着它可以在没有用户界面的情况下运行浏览器，这对于自动化脚本和服务器环境非常有用。
PhantomJS的主要特性包括：

  • 原生支持多种Web标准：如DOM处理，CSS选择器，JSON，Canvas和SVG。
  • 页面自动化：可以通过JavaScript API控制网页，包括加载和操作网页。
  • 屏幕捕获：可以将网页渲染为PDF或各种图片格式。
  • 网络监控：可以监控网络活动，用于性能分析，调试和测试。
虽然PhantomJS非常强大，但请注意，它的开发已于2018年停止，因此可能不支持最新的Web标准和技术。如果你需要一个持续更新并支持最新Web技术的无头浏览器，你可能需要考虑使用Puppeteer，它是一个由Google维护的，使用Chromium（Google Chrome的开源版本）作为后端的无头浏览器库。
2、PhantomJs安装(下载)后，直接去执行命令即可截图


  • Windows/Linux。都进入安装目录的bin目录
  • 语法：win/Linux程序 调用的js 截图的网站 截图后保存的地址
  1. phantomjs.exe ……\win\examples\rasterize.js http://www.baidu.com ……Test\bddddd11.png
  3. ./phantomjs ……\win\examples\rasterize.js http://www.baidu.com ……Test\bddddd11.png
复制代码

  • 例如：Windows（Linux一样的）

  • 能保存截图，说明可以使用：

3、Java代码实现phantomjs截图

3.1、思路

  • 单独在win/linux安装phantomjs
  • 根据不同系统生成不同的执行命令
  • 使用Java库Runtime.getRuntime().exec("cmd")：调用phantomjs即可
  • 最终完成截图。
3.1、将下载的包放入项目地址中，方便调用

3.2、修改rasterize.js文件
位置：.../examples/rasterize.js
  1. var page = require('webpage').create(),
  2.     system = require('system'),
  3.     address, output, size;
  5. //可以带cookie
  6. //var flag = phantom.addCookie({
  7. //        "domain": ".baidu.com" ,
  8. //        "expires": "Fri, 01 Jan 2038 00:00:00 GMT",
  9. //        "expiry": 2145916800,
  10. //        "httponly": false,
  11. //        "name": "token",
  12. //        "path": "/",
  13. //        "secure": false,
  14. //        "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiJud19kemdkIiwiRXhwaXJlIjoiMjAyMy0wOC0xMCAxNDoyMzo0NyJ9.InsFJkcXI6C57r-1Oqb7PMn-OcP9k0W5lf1K896EasY"
  15. //});
  17. if (system.args.length < 3 || system.args.length > 5) {
  18.     phantom.exit(1);
  19. } else {
  20.     address = system.args[1];//传入url地址
  21.     output = system.args[2];//输出图片的地址
  22.     page.viewportSize = { width: 800, height: 1800 };//自定义定义宽高
  23.     if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
  24.         size = system.args[3].split('*');
  25.         page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
  26.                                            : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
  27.     } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
  28.         size = system.args[3].split('*');
  29.         if (size.length === 2) {
  30.             pageWidth = parseInt(size[0], 10);
  31.             pageHeight = parseInt(size[1], 10);
  32.             page.viewportSize = { width: pageWidth, height: pageHeight };
  33.             page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
  34.         } else {
  35.             console.log("size:", system.args[3]);
  36.             pageWidth = parseInt(system.args[3], 10);
  37.             pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
  38.             console.log ("pageHeight:",pageHeight);
  39.             page.viewportSize = { width: pageWidth, height: pageHeight };
  40.         }
  41.     }
  42.     if (system.args.length > 4) {
  43.         page.zoomFactor = system.args[4];
  44.     }
  45.     page.open(address, function (status) {
  46.         if (status !== 'success') {
  47.             console.log('Unable to load the address!');
  48.             phantom.exit(1);
  49.         } else {
  50.             window.setTimeout(function () {
  51.                 page.render(output);
  52.                 phantom.exit();
  53.             }, 3000);
  54.         }
  55.     });
  56. }
  58. address = system.args[1];//传入url地址
  59. output = system.args[2];//输出图片的地址
  60. page.viewportSize = { width: 1200, height: 780 };//自定义定义宽高 (2000 * 1300 比较合适)
复制代码
3.3、application.yml配置文件配置phantomjs的位置地址
  1. # phantomjs的位置地址
  2. phantomjs:
  3.   binPath:
  4.     windows: plugins/phantomjs211/win/bin/phantomjs.exe
  5.     linux: /plugins/phantomjs211/linux/bin
  6.   jsPath:
  7.     windows: plugins/phantomjs211/win/examples/rasterize.js
  8.     linux: /plugins/phantomjs211/linux/examples/rasterize.js
  9.   imagePath:
  10.     windows: D:/Test
  11.     linux: /downImage
复制代码
3.4、获取配置文件的插件地址
  1. package com.cc.urlgethtml.utils;
  3. import lombok.Data;
  4. import org.springframework.beans.factory.annotation.Value;
  5. import org.springframework.stereotype.Component;
  7. /**
  8. * <p>根据不同系统获取不同路径</p>
  9. *
  10. * @author CC
  11. * @since 2023/11/3
  12. */
  13. @Data
  14. @Component
  15. public class PhantomPath {
  17.     @Value("${phantomjs.binPath.windows}")
  18.     private String binPathWin;
  19.     @Value("${phantomjs.jsPath.windows}")
  20.     private String jsPathWin;
  21.     @Value("${phantomjs.binPath.linux}")
  22.     private String binPathLinux;
  23.     @Value("${phantomjs.jsPath.linux}")
  24.     private String jsPathLinux;
  25.     @Value("${phantomjs.imagePath.windows}")
  26.     private String imagePathWin;
  27.     @Value("${phantomjs.imagePath.linux}")
  28.     private String imagePathLinux;
  30.     //获取当前系统是否是Windows系统（不是就是服务器，服务器默认Linux系统（centos））
  31.     private static final Boolean IS_WINDOWS = System.getProperty("os.name").toLowerCase().contains("windows");
  33.     public String getImagePath() {
  34.         return IS_WINDOWS ? imagePathWin : imagePathLinux;
  35.     }
  37.     public String getBinPath() {
  38.         return IS_WINDOWS ? binPathWin : binPathLinux;
  39.     }
  41.     public String getJsPath() {
  42.         return IS_WINDOWS ? jsPathWin : jsPathLinux;
  43.     }
  45.     public boolean getIsWindows() {
  46.         return IS_WINDOWS;
  47.     }
  48. }
复制代码
3.5、PhantomTools工具
  1. package com.cc.urlgethtml.utils;
  3. import cn.hutool.core.util.StrUtil;
  4. import lombok.Data;
  5. import lombok.extern.slf4j.Slf4j;
  6. import org.springframework.stereotype.Component;
  7. import org.springframework.util.ResourceUtils;
  9. import javax.annotation.Resource;
  10. import java.io.*;
  11. import java.util.ArrayList;
  12. import java.util.List;
  14. /** <p>根据网页地址转换成图片</p>
  15. *  <p>条件：需要插件及js脚本</p>
  16. *  <p>缺陷：部分网址，截图样式部分还是有问题</p>
  17. * @since 2023/11/6
  18. * @author CC
  19. **/
  20. @Data
  21. @Slf4j
  22. @Component
  23. public class PhantomTools {
  25.     @Resource
  26.     private PhantomPath phantomPath;
  28.     // token
  29.     private static String cookie = "token=";
  31.     /**
  32.      * @param url 地址
  33.      * @param imageName 图片全名
  34.      * @since 2023/11/3
  35.      **/
  36.     public void printUrlScreen2jpg(String url, String imageName) throws IOException{
  37.         //执行命令，生成图片
  38.         String[] cmd = this.getCmd(url, imageName);
  39.         Process process;
  40.         if (phantomPath.getIsWindows()) {
  41.             //一个参数：直接执行命令（）
  42.             process = Runtime.getRuntime().exec(cmd);
  43.         }else {
  44.             String linuxPath = getBasePath().concat(phantomPath.getBinPathLinux());
  45.             log.info("Linux执行目录：{}", linuxPath);
  46.             process = Runtime.getRuntime().exec(cmd, new String[]{}, new File(linuxPath));
  47.         }
  49.         //读取执行日志
  50.         InputStream inputStream = process.getInputStream();
  51.         BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
  52.         String msg;
  53.         while ((msg = reader.readLine()) != null) {
  54.             log.info("PhantomJs导出图片日志：{}", msg);
  55.         }
  56.         log.info("PhantomJs导出图片：{}", imageName);
  57.         //关闭流
  58.         close(process, reader);
  59.     }
  61.     // 生成cmd命令：可以是直接的字符串，也可以是string数组
  62.     public String[] getCmd(String url, String imageName) throws FileNotFoundException {
  63.         String basePath = getBasePath();
  65.         List<String> list = new ArrayList<>();
  66.         //Windows命令
  67.         if (phantomPath.getIsWindows()) {
  68.             list.add(basePath.concat(phantomPath.getBinPath()));
  69.             list.add(basePath.concat(phantomPath.getJsPath()));
  70.             list.add(url);
  71.             list.add(String.format("%s/%s", phantomPath.getImagePath(), imageName));
  72.         }
  74.         //Linux命令
  75.         else {
  76.             list.add("./phantomjs");
  77.             list.add(phantomPath.getJsPath());
  78.             list.add(url);
  79.             list.add(String.format("%s/%s", phantomPath.getImagePath(), imageName));
  80.         }
  82.         log.info("PhantomJs导出图片的cmd：{}", list);
  83.         return list.toArray(new String[0]);
  84.     }
  86.     //获取项目跟目录的：plugins目录
  87.     private static String getBasePath() throws FileNotFoundException {
  88.         String basePath = ResourceUtils.getURL("plugins").getPath();
  89.         return StrUtil.removePrefix(basePath, "/");
  90.     }
  92.     //关闭命令
  93.     public static void close(Process process, BufferedReader bufferedReader) throws IOException {
  94.         if (bufferedReader != null) {
  95.             bufferedReader.close();
  96.         }
  97.         if (process != null) {
  98.             process.destroy();
  99.         }
  100.     }
  102. }
复制代码
3.6、测试

  • controller
  1.    /** <p>PhantomJs截图<p>
  2.      * <p>截图到本地，未下载到浏览器<p>
  3.      * @return {@link String}
  4.      * @since 2023/11/6
  5.      * @author CC
  6.      **/
  7.     @GetMapping("/getPhantomJs")
  8.     public void getPhantomJs(){
  9.         String url = "https://www.baidu.com/";
  10.         try {
  11.             phantomTools.printUrlScreen2jpg(url, "第一个图片.png");
  12.         } catch (Exception e) {
  13.             throw new RuntimeException(e);
  14.         }
  15.     }
复制代码

  • 成功

  • 导出京东等网站的缺陷（很多js无法、图片无法加载）

三、Puppeteer

3.1、Puppeteer介绍
Puppeteer是一个由Google Chrome团队官方提供的Node.js库，它提供了一组API来通过DevTools协议控制Chromium或Chrome。在大多数情况下，它可以用来替代PhantomJS。
Puppeteer的主要功能包括：

  • 生成页面的屏幕截图和PDF。
  • 爬取SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
  • 自动表单提交，UI测试，键盘输入等。
  • 创建一个最新的自动化测试环境，使用最新的JavaScript和浏览器功能，如Async/Await，ES6等。
  • 捕获网站的时间线，以便帮助诊断性能问题。
Puppeteer默认下载并使用特定版本的Chromium，所以它对于最新的web API和特性的支持非常好。
3.2、实现（未实现）
四、Selenium


  • 相当于用户在操作浏览器
4.1、Selenium介绍
Selenium是一个流行的开源Web测试框架，它允许你编写脚本以自动化浏览器操作。这些脚本可以用于测试Web应用程序在各种浏览器中的行为，或者用于自动化重复的Web浏览任务。
Selenium支持多种编程语言，包括Java、C#、Python、Ruby和JavaScript。它还支持所有主流的Web浏览器，包括Chrome、Firefox、Safari和Internet Explorer。
Selenium有两个主要组件：

  • Selenium WebDriver：这是一个库，提供了一组API来编程式地控制浏览器。你可以使用这些API来模拟用户操作，如点击按钮、填写表单和导航页面。
  • Selenium Grid：这是一个工具，用于在多台机器和多种浏览器上并行运行测试。这对于测试Web应用程序在不同环境中的行为非常有用。
虽然Selenium主要用于测试，但它也可以用于Web爬虫，以自动化数据收集任务。
4.2、实现（未实现）
4.3、Puppeteer和Selenium区别
  1. Puppeteer和Selenium都可以用于网页截图，但它们各有优势。
  3. Puppeteer：
  5. - Puppeteer是由Chrome团队开发和维护的，因此它与Chrome浏览器的集成非常紧密，可以使用最新的Chrome特性。
  6. - Puppeteer的API设计得更为现代和简洁，使用Promise，可以很好地与现代JavaScript（如async/await）一起使用。
  7. - Puppeteer在截图和PDF生成方面的功能更为强大，例如，它可以很容易地截取全页面的屏幕截图，或者生成页面的PDF。
  9. Selenium：
  11. - Selenium支持多种编程语言和浏览器，如果你需要在多种浏览器或使用不同的编程语言进行截图，Selenium可能是更好的选择。
  12. - Selenium有一个大型的社区和大量的第三方库，这可能会使得解决问题和寻找已有的解决方案更为容易。
  14. 总的来说，如果你只需要在Chrome浏览器中进行截图，并且喜欢使用现代的JavaScript API，那么Puppeteer可能是更好的选择。如果你需要在多种浏览器中进行截图，或者使用Java、Python等其他编程语言，那么Selenium可能是更好的选择。
复制代码
五、总结

1、生成的命令

  • 生成cmd命令：可以是直接的字符串，也可以是string数组(推荐)
2、Process

  • 提供了与操作系统中的进程进行交互
  • 方法（执行系统命令）：Runtime.getRuntime().exec()
  1. Runtime.getRuntime().exec(参数1)
  2. 参数1是：执行的命令
  4. Runtime.getRuntime().exec(参数1，参数2，参数3)
  5. 参数1是：执行的命令
  6. 参数3是：程序执行的文件夹，如：/phantomjs211/linux/bin
复制代码
3、代码地址
https://gitee.com/KakarottoChen/blog-code.git
……\blog-code\SpringBoot\UrlGetHtml
4、参考：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

河曲智叟

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表