博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
wkhtmltoimage开源工具的基本应用
阅读量:6089 次
发布时间:2019-06-20

本文共 3520 字,大约阅读时间需要 11 分钟。

hot3.png

读大学时,微博兴起,由于140个字有限,于是有人开发了长微博,当时但想着开发一个长微博的应用。试用了几款长微博工具,大部分都是只能输入文字和插件一两张图片,这种长微博工具实现不难。但如果想在长微博中支持富文本,例如插件表格之类的(),那就没那么简单了。

实现支持富文本的长微博,原理如下:

1.客户端提供一个富文本输入框(CKeditor,Ueditor之类的)

2.把在输入框中输入的html代码发送到服务端,服务端解析html代码,生成图片返回客户端

重点要解决的问题是后台如何解析html代码并生成图片。一个最初的想法是用htmlparse解析html代码,对于简单的html代码这个方法可行,但如果html代码的结构混乱就麻烦了。另一个想法是在后台用一个浏览器渲染这段html代码,然后利用浏览器的功能把图片导出。基于这个想法,用了javafx2.0里面的Webview,Webview实质上就是一个浏览器,它用的是WebKit内核,用它可以渲染html和执行javascript。用Webview生成图片的代码如下:

import java.io.File;import java.io.IOException;import javafx.application.Application;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.embed.swing.SwingFXUtils;import javafx.scene.*;import javafx.scene.image.Image;import javafx.stage.Stage;import javafx.scene.web.WebView;import javafx.scene.web.WebEngine;import javafx.concurrent.Worker.State;import javax.imageio.ImageIO;public class HtmlToImage extends Application {	@Override	public void start(Stage primaryStage) {		final WebView view = new WebView();		Scene scene = new Scene(view, 800, 600);		primaryStage.setScene(scene);		final WebEngine webEngine = view.getEngine();		webEngine.load("http://www.huxiu.com/article/5840/1.html");		primaryStage.show();		//监听webEngine加载进度,可能页面加载不完整		webEngine.getLoadWorker().stateProperty()				.addListener(new ChangeListener
() { @Override public void changed(ObservableValue
ov, State oldState, State newState) { if (newState == State.SUCCEEDED) { snapshot(view); } } }); } public void snapshot(Node view) { Image image = view.snapshot(null, null); try { ImageIO.write(SwingFXUtils.fromFXImage(image, null), "png", new File("D:\\" + System.currentTimeMillis() + ".png")); System.out.println("图片已生成"); } catch (IOException e) { e.printStackTrace(); } } public static void main(String[] args) { launch(args); }}

生成的图片如下:

图1

这个方法可以把html代码渲染成图片并且导出,但只是一个简单的截屏功能,如果屏幕上出现滚动条,则只能导出屏幕上显示的那部分效果,所以这个方案也是不可行的。但它给我们提供了一个很好的思路。即通过浏览器来渲染html,利用浏览器提供的api导出图片。Chrome和Firfox这两大浏览器的内核都是开源的,可以从这些开源的浏览器内核入手。看它们有没有提供对应的API。在谷歌上搜索了一番,找到了一个可用的开源目,这个开源项目可以把html转换成pdf或者image,它也是基于webkit内核实现这些功能的。wkhtmltopdf提供了windows、linux、和Mac 三个版本,下面以windows版本为例,说明它的用法。

1.先下载,解压安装

2.在命令行下输入:wkhtmltopdf myhomepage.pdf 就可以把谷歌的首页导出为pdf文件,

   同理,wkhtmltoimage myhomepage.jpg 可以把谷歌的首页导出为图片。

注意:wkhtmltopdf和wkhtmltoimage对中文编码支持不友好,如果网页是GBK编码,生成的图片或者pdf是乱码,所以最好先把网页下载到本地,改成UTF-8编码,再调用这两个工具生成图片或者pdf。

以上只是简单应用wkhtmltopdf的命令,事实上这两个命令可以带参数的,详细的参数说明可以看官方文档。

3.在java程序中调用wkhtmltoimage。因为wkhtmltoimage并没有提供java api,所以只能通过java程序启动命令行,通过命令行调用wkhtmltoimage来完成任务。

public class HtmlToImage{	public static void main(String[] args){		ProcessBuilder pb = new ProcessBuilder("D:\\Program Files\\wkhtmltopdf\\wkhtmltoimage", "www.baidu.com", "D:\\test.jpg");		Process process;		try {			process = pb.start();			//注意,调用process.getErrorStream()而不是process.getInputStream()			BufferedReader errStreamReader = new BufferedReader(new InputStreamReader(process.getErrorStream())); 			System.out.println("read errstreamreader");			String line = null;			line = errStreamReader.readLine(); 			while(line != null) { 			    System.out.println(line); 			    line = errStreamReader.readLine(); 			}			process.destroy();		    System.out.println("destroyed process");		} catch (IOException e) {			e.printStackTrace();		}	}}

总结:wkhtmltopdf和wkhtmltoimage是一个功能强大的开源工具,可以实现很多类似的功能。例如,用谷歌搜索时,把鼠标移动到链接上面,会显示该网页的缩略图,这个功能可以用wkhtmltoimage来实现。如果想把博客导出为pdf,可以用wkhtmltopdf来实现。

转载于:https://my.oschina.net/lidonghao/blog/90083

你可能感兴趣的文章
C#方法拓展
查看>>
MySql.Data.dll的版本
查看>>
Linux系统磁盘管理
查看>>
hdu 2191 (多重背包+二进制优化)
查看>>
home.php
查看>>
neo4j---删除关系和节点
查看>>
redis分布式锁redisson
查看>>
什么样的企业可以称之为初创企业?
查看>>
Python爬虫之BeautifulSoup
查看>>
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 使用选择器在页面中插入内容...
查看>>
如何判断自己适不适合做程序员?这几个特点了解一下
查看>>
newinstance()和new有什么区别
查看>>
android下载封装类
查看>>
[node] 用 node-webkit 开发桌面应用
查看>>
Nginx访问控制和虚拟主机
查看>>
report widget not working for external users
查看>>
windows phone 摄像头得到图片是旋转90°
查看>>
Linux--sed使用
查看>>
没有显示器的情况下安装和使用树莓派
查看>>
【android】使用handler更新UI
查看>>