您的位置：首页 > Web前端 > HTML

Web页面截图或HTML内容保存为图片

2017-06-28 11:21 465 查看

网页截图或html页面保存为图片一般考虑两种方式实现，一种是前端JavaScript实现直接进行截图转换为图片，另一种是将html代码发送到后台程序，后台根据html内容重新渲染出图片并保存。

但两种方式均有限制，前者主要看你使用的JS库的限制以及浏览器的限制，后者主要针对静态html文件进行，且对于包含CSS文件以及JS文件的HTML文档，解析效果差。

首先看一下前端直接进行截图导出的情况，网上有很多转换的插件，用的较多的有：html2canvas插件，下面以该插件为例进行介绍：

第一步，把网页保存为Canvas画布，借助于html2canvas库，http://html2canvas.hertzen.com/

html2canvas(document.getElementById("id1"), {
onrendered: function(canvas) {
document.getElementById("id2").appendChild(canvas);//生成画布后如何处理，当然可以在新标签打开，在浮层展示等等
},
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id
});


Note:html2canvas()第一个参数为要生成canvas的区域，如果整个网页生成canvas，则是document.body。第二个参数详见官网设置canvas的各种属性，当然修改源代码可以添加自己想要的属性，如给canvas添加id等。

第二步，把第一步中生成的canvas保存成图片

var canvas = document.getElementById("canvas"),
url = canvas.toDataURL();//
//以下代码为下载此图片功能
var triggerDownload = $("").attr("href", url).attr("download", "img.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();


这里关注toDataURL()方法即可，可以把canvas转化成data形式的图片url，把这个url赋给加载中…标签即可显示图片，代码中其他部分为自己需要的下载功能。

该种方式对于某些不能转换为canvas的元素是不适用的，例如我想讲网页上的地图瓦片进行截图导出则不行。接下来看一下第二种方式，前端获取浏览器渲染好的HTML页面，并将页面中你想保存为图片部分的HTML传给后台（页面的标签要各自带上样式，最好别将样式统一写到一个CSS文件中，这样后台解析可能会有问题），后台根据你传递的html进行解析并渲染，然后进行图片保存。后台对于html代码解析有好多第三方库，本文采用的是html2image.jar，该库的是基于NekoHTML 解析器实现的，提供了很方便的接口：

import java.net.MalformedURLException;
import gui.ava.html.Html2Image;
public class HTML2ImageTest {

public static void main(String[] args) throws MalformedURLException {

String srcHtmlString = "<html><head></head><body><div><img src='http://192.98.8.234/vec_w/L4/R6/C12.png' style='visibility: inherit; opacity: 1; position: absolute; left: 793px; top: 402px; width: 256px; height: 256px;' class=''><img src='http://192.98.8.234/vec_w/L4/R5/C12.png' style='visibility: inherit; opacity: 1; position: absolute; left: 793px; top: 146px; width: 256px; height: 256px;' class=''><img src='http://192.98.8.234/vec_w/L4/R6/C13.png' style='visibility: inherit; opacity: 1; position: absolute; left: 1049px; top: 402px; width: 256px; height: 256px;' class=''></div></body></html>";
final Html2Image html2Image = Html2Image.fromHtml(srcHtmlString);
html2Image.getImageRenderer().saveImage("d:/baidu.png");
//          html2Image.getHtmlImageMap().saveImageMapDocument("baidu.html", "baidu.png");

}
}


利用该方式，成功将网页上的瓦片地图进行保存为本地图片了！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript web 浏览器 网页截图
相关文章推荐
新的分享
章节导航