html to image java_dom-to-image截屏，html保存成图片

dom-to-image把dom节点转换为矢量图(svg)和位图(png和jpeg) ，可处理存在滚动条的页面。

前段代码如下：

// 导出按钮事件

core.exportPic = function(){

$("#exportExcel").unbind("click").click(function() {

// 导出Excel

core.post("xls");

});

$("#exportPDF").unbind("click").click(function() {

// 导出成pdf

core.post("pdf");

});

}

core.post = function(type){

// 导出节点

var node = document.getElementById('dbd_view');

// 导出宽度

var width = document.body.scrollWidth;

// 导出高度

var height = node.scrollHeight;

var index = layer.load(0, {shade: [0.4,'#fff']}); //0代表加载的风格，支持0-2

// dom转图片

domtoimage.toPng(node,{width: width,height: height}).then(function (dataUrl) {

// 图片数据处理

dataUrl = dataUrl.split('base64,')[1];

// 请求后台输出文件

var url = Design.basePath + '/dataView/dashboard/export.bs';

$.post(url,{"imgData": dataUrl},function(data){

layer.close(index);

// 下载

var fileName = encodeURI(encodeURI(decodeURI(Design.dbName) + "." + type));

window.location.href = Design.basePath + '/dataView/dashboard/down.bs?path=' +

data.path + "&name=" + fileName;

}, 'json');

});

}

后台生成图片

public void export() throws Exception {

// 获取图片数据

String imgData = dtoParam.getString("imgData");

// 图片数据解析

BASE64Decoder decoder = new BASE64Decoder();

byte[] b = decoder.decodeBuffer(imgData);

for(int i=0;i

if(b[i]<0) {

//调整异常数据

b[i]+=256;

}

}

/* 生成png图片 */

// 图片生产临时存储位置

String tempPath = BsConfigFileHelper.getLocalRoot() + BsConfigFileHelper.getLocalTemp();

String savePath = tempPath + "/" + dbId + ".png";

File file = new File(tempPath + "/");

if(!file.exists()) file.mkdirs();

OutputStream out = new FileOutputStream(savePath);

out.write(b);

out.flush();

out.close();

}