需求背景

BI上的报表需要设置定时任务截图发邮件到订阅人的邮箱中。刚开始以为截图的活是前端的，后来发现使自己的锅。

调研

截图的研究了一下，主流应该是 selenium 和 phantomjs。参考了各大开源BI软件，Cboard的邮件发送是基于phantomjs。

phantomjs

phantomjs主要原理也就是基于一个无头浏览器，然后执行相应JS代码，进行截图。

public class JsTest {private static String tempPath = "D:/phantomjs-2.1.1-windows/temp";// 图片保存目录private static String BLANK = " ";private static String binPath = "D:/phantomjs-2.1.1-windows/bin/phantomjs.exe";// 插件引入地址private static String jsPath = "D:/phantomjs-2.1.1-windows/examples/rasterize.js";// js引入地址// 执行cmd命令public static String cmd(String imgagePath, String url) {String cmd =  binPath + BLANK + jsPath + BLANK + url + BLANK + imgagePath;System.out.println(cmd);return cmd;}//关闭命令public static void close(Process process, BufferedReader bufferedReader) throws IOException {if (bufferedReader != null) {bufferedReader.close();}if (process != null) {process.destroy();process = null;}}/*** @param url* @throws IOException*/public static void printUrlScreen2jpg(String url) throws IOException{String imgagePath = tempPath+"/"+System.currentTimeMillis()+".png";//图片路径//Java中使用Runtime和Process类运行外部程序Process process = Runtime.getRuntime().exec(cmd(imgagePath,url));InputStream inputStream = process.getInputStream();BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));String tmp = "";while ((tmp = reader.readLine()) != null) {close(process,reader);}System.out.println("success");}public static void main(String[] args) throws IOException {String url = "http://jnsimba.blog.csdn.net";printUrlScreen2jpg(url);}
}

如果没有意外情况的话，这里会得到一张图，我们可以看到这玩意是天然支持截取长图的，即滚动截图

本以为就这样玩了，竟然发现，我们的网站用phantomjs截出来的图是空白的，类似于在IE浏览器上打不开显示空白一样，类似下面。

这可就麻烦了，一顿搜索，没法解决，是因为phantom的无头浏览器不支持promise错误导致的。去官网找发现这项目已经很久不维护了，这就没辙了，只能另寻出路。

selenium

搜到了selenium这个玩意，是做自动化测试的，可以基于chrome浏览器进行截图，于是测试了一番。


public class JsTestChrome {public static void main(String[] args) throws Exception {System.setProperty("webdriver.chrome.driver", "D:\\chromedriver_win32\\chromedriver.exe");ChromeOptions options = new ChromeOptions();//可开启无界面模式，不会弹出界面options.setHeadless(true);ChromeDriver driver = new ChromeDriver(options);ChromeDriver driver = new ChromeDriver();driver.get("http://jnsimba.blog.csdn.net");SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMddHHmmss");  String time = dateFormat.format(Calendar.getInstance().getTime());  File srcFile = driver.getScreenshotAs(OutputType.FILE);  FileUtils.copyFile(srcFile, new File(time + ".png")); driver.close();}}

可以完美截图，我们的网页也可以完美截图

但是，这玩意无法截长图，这个东西很是痛点，踩了一下午的坑，终于fix this problem！！！

给上述代码加上以下的size设置，就可以解决这个问题，注意一定要同时设置 headless=true

options.setHeadless(true); //一定要设置headless，否则只能截出电脑屏幕大小的图！！！
Long width = (Long)driver.executeScript("return document.documentElement.scrollWidth");
Long height =(Long) driver.executeScript("return document.documentElement.scrollHeight");
driver.manage().window().setSize(new Dimension(width.intValue(), height.intValue()));

服务器部署

本以为直接就可以在服务器上运行，设置还需要预先设置一系列环境

//chrome程序
yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm//chrome依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y//字体
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

设置以上基本就可以，如果截的图还有方框乱码，可以自行安装中文字体。

中文字体下载：

链接: https://pan.baidu.com/s/1sH7sse2-gkeY4onl07BMVQ 提取码: ueyw

#将下载的字体拷贝到此目录下
mkdir -p /usr/share/fonts/chinese/
cp songti.ttf /usr/share/fonts/chinese/
cd /usr/share/fonts/chinese/#为刚加入的字体设置缓存使之有效
fc-cache -fv
#查看系统中的字体，是否已包含songti
fc-list

再次截图，发现完美出图！！！

selenium+phantomjs截长图踩坑相关推荐

python selenium截图_利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)...
对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...
java使用Chrome+Selenium+Screenshot 实现浏览器截长图
场景:需要长截图整个网站; 效果: 我进行了缩小和模糊处理,涉及到公司业务.模糊的可以看到是忽略了浏览器的头部,保留了完整的整个网页解决思路: 模拟用户打开浏览器,然后截图,这边涉及到几个问题浏览 ...
WebView截长图解决方案
作者:Windin 贝聊移动Android工程师链接: http://www.jianshu.com/p/0faa70e88441 前言:本文主要讲述了以下两个方面: 1. 普通WebView如何截 ...
python3:android手机截长图的小工具
这个工具写下来遇到了不少坑,直到现在还没有完全解决,先记录下来吧,后面有机会再修改,或是有心的同学帮忙分析一下为什么? 主要实现以下功能: 1. 在手机上截一张图至桌面. 2. 在手机在连接截多张图片 ...
pycharm 代码截长图插件 code screenshots 使用记录
今天突发奇想想要将pycharm中的代码截图出来,用传统的截图软件无法截长图,我想应该有人把这个事情搞过了,然后上网一搜,还真还有,但是使用中有坑,没人说明,这里集中记录一下,留作以后使用. pych ...
【基础知识】截长图的方法以及防止截图时下拉框自动收回的方法
截长图的方法: 博主之前使用的tim,不具备截长图的功能,之后百度了很多的方法,最后发现QQ的截长图功能最好用,很不解,tim不应该是偏向于办公吗,这种功能竟然还能阉割? 使用工具:QQ最新版使用方 ...
UIScrollView截长图
iOS UIScrollView截长图优化保留页面上的阴影等细节显示. extension UIScrollView {/**scrollview截长图可以保留阴影图片拼接*/func snapSh ...
android 截长图方法,Android实现截屏与截长图功能
本文实例为大家分享了Android实现截屏与截长图功能展示的具体代码,供大家参考,具体内容如下 Demo在GitHub的地址:ScreenShoot 在Android开发中,有时候会遇到需要截屏分享到 ...
华为手机截屏怎么截长图_华为手机竟然有6种截屏方法，你用过几种？3种以上的手机没白买...
很多时候我们都喜欢通过手机截图来对一些信息进行保存分享,那么常用华为手机,关于华为手机截图方法你知道几种呢? 悄悄告诉你,其实华为手机截图方法多达6中,各种花样截图方法都有,就是可惜了很多小伙伴都不知 ...
华为手机截屏怎么截长图_华为手机5种常用截屏方式，教你轻松定格屏幕精彩瞬间...
手机上的精彩内容这么多,想要截图发好友,你知道怎么截才最顺手嘛? 华为手机提供了多种实用又快捷的截屏方法,总有一种适合你,快来看看吧~ 隔空截屏抓取截屏,酷炫手势在屏幕正前方20~40厘米,伸开手 ...

selenium+phantomjs截长图踩坑

需求背景

调研

phantomjs

selenium

服务器部署

selenium+phantomjs截长图踩坑相关推荐

最新文章

热门文章