dom-to-image截屏，html保存成圖片

dom-to-image把dom節點轉換爲矢量圖（svg）和位圖（png和jpeg） ，可處理存在滾動條的頁面。

dom-to-image下載地址：https://pan.baidu.com/s/1wrClGYO_NCeta2c8MCmb3w  提取密碼：rzek

前段代碼以下：

// 導出按鈕事件
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<b.length;++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();
}