java div截图_Html网页DIV截图功能

需求及前提：

(1) 将web网页展示的某些图表，导出为图片保存；

(2) 图表可能是Canvas的(使用H5绘图组件生成的或者自己Draw的)，也可能是div组合出来的；

方案1：

使用html2canvas(某些浏览器需要引入依赖es6-promise.min.js,因为木有Promise对象)

和 canvas2image

示例：

$("#snap_btn_001").on("click",function(event){

event.preventDefault();

var w = $("#id001").width();

var h = $("#id001").height();

//这一坨代码是为了解决截图不清晰的问题，但是ratio应该根据浏览器的分辨率计算，这里先写死的一个数值

var ratio = 2;

//要将 canvas 的宽高设置成容器宽高的 Ratio 倍

var canvas = document.createElement("canvas");

canvas.id = "mycanvas";

canvas.width = w * ratio;

canvas.height = h * ratio;

canvas.style.width = w + "px";

canvas.style.height = h + "px";

var context = canvas.getContext("2d");

//然后将画布缩放，将图像放大ratio倍画到画布上

context.scale(ratio,ratio);

html2canvas(document.getElementById("id001"),{

allowTaint: true,

taintTest: false,

width: w,

height:h,

onrendered: function(canvas) {

var dataUrl = canvas.toDataURL();

var newImg = document.createElement("img");

//newImg.style = "display:none;";    //如果要导出，这儿可以隐藏，然后用canvas2image搞定

newImg.src =  dataUrl;

document.body.appendChild(newImg);

}

});

});

参考文章：

方案2：

对于使用H5绘图组件的，多数组件本身提供了导出为图片的方法，调用或者配置即可。

例如echarts js 的saveAsImgae配置。

方案1和2对比：

(1) 方案1 使用范围广，如果图表包含了自定义的div，也能截图导出，但是清晰度有问题(根源是啥，需要研究html2canvas源码，我没研究，但是我相信可以解决。)

(2) 方案2，使用组件自身的导出，由于本身就是canvas了，少了前一步的转换，清晰度不错，就是只能导出组件自身的图表。