HTML转图片利器:wkhtmltox

html-css015

HTML转图片利器:wkhtmltox,第1张

关于 wkhtmltox ,是一个可以把HTML转换为图片和pdf的工具。

不多介绍了,详见官网 https://wkhtmltopdf.org/

有时候为了让程序可以执行这个命令,可能需要配置环境变量

如果网页上的中文,转成图片后变成乱码方块,请安装相关字体 :)

执行 wkhtmltoimage www.bing.com bing.png ,就会在当前目录下生成了一张png图片。

这个命令还可以增加一些参数,比如常用的设置宽高,图片质量等参数

执行 wkhtmltoimage --crop-w 410 --width 410 --quality 50 www.bing.com bing2.png 看看

说明:

还有更多参数用法,请 wkhtmltoimage -h 查看。

HTML转pdf同理, wkhtmltopdf -h 。

如何将整个网页转为图片听语音

网页内容保存到本地,有一个很好的方法就是将整个网页内容转化为一张图片,之后就可以无需网络观阅该网页了。同时对一个动态网站将即时的内容保存为图片不失为留作纪念的好方式。

工具/原料

能联网的pc

360极速浏览器

直接保存

1

首先咱得有一个360极速浏览器和一个需要完全将网页保留下来的网页。比如下面我以前的一个经验,我想将它保存为图片。

如何将整个网页转为图片

2

我们直接将网页保存为图片格式,使用快捷键ctrl+M或者工具--保存网页为图片。

如何将整个网页转为图片

3

保存后,在保存的位置打开保存的图片文件,保存的清晰度还是很高的。

如何将整个网页转为图片

如何将整个网页转为图片

END

用360云快照

1

云快照的好处是,你可以将整个网页保存为云端图片永不丢失,多处同步。

2

有三种方式在一个网页上使用网页快照:ctrl+B快捷键,工具---网页快照,以及页面下的快捷图标。

3

开始同步快照。

4

点击开始上传,会将快照上传到云端,你需要登录,之后可以进行一些设置等。

5

在云端你会被分配到一个url专门用来存放该快照,你可以进行分享等操作但并不能下载。

END

直接打印的方式

1

直接打印,你既可以外接打印设备,也可以调用microsoft onenote(在已经安装全系列office的情况下)。

2

具体的打印界面如下。ctrl+P或者设定--打印,进入打印页面。你可以进行很多设置。

3

详细具体的操作可以在我前面一篇经验中看到,请转向http://jingyan.baidu.com/article/a3a3f811828f428da2eb8aef.html

END

注意事项

所有操作均已360极速浏览器为操作浏览器

业务逻辑:

在html页面显示表格,使用visibility: inherit隐藏该表格.点击按钮的时候使用html2canvas把需要转换成图片的dom元素转换成canvas对象,通过onclone回调方法将在canvas对象中找到该表格元素进行显示,返回的canvas图片对象可以通过drawImage()方法添加在canvas画布中.