JS如何导出Div的内容为图片

最近因为项目需要,研究了几天用js导出页面上的div为图片。项目需求是这样的,一个页面上有统计图和统计表,另外一部分是地图,当用户点击导出报告时,需要将页面内容导出到Excel,统计表可以从后台查出列表,然后以表格形式导出;统计通采用的echarts,可以转换为base64编码,然后后台处理之后导出。但是地图这块就有点难了,首先地图不是一张图片,其次地图的图片不在本地,所以虽然我自己的功能没实现,但是研究出了div导出为图片,需要的就拿走。


    div导出为图片,并不是直接完成的,原理可以认为截取屏幕上div大小,然后转换为图片格式。现在有两种方式,首先是将div转换为HTML5的画布,然后画布转换成base64编码,传回后台进行处理;第二种是先把div内容转成svg,然后再转换成base64。


第一种

  1. <html>    
  2.     <head>    
  3.         <meta name="layout" content="main">    
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
  5.         <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    
  6.         <script type="text/javascript" src="html2canvas.js"></script>    
  7.              
  8.         <script  type="text/javascript" >    
  9.     $(document).ready( function(){    
  10.                 $(".example1").on("click", function(event) {    
  11.                         event.preventDefault();    
  12.                         html2canvas(document.getElementById("textArea"), {    
  13.                         allowTaint: true,    
  14.                         taintTest: false,    
  15.                         onrendered: function(canvas) {    
  16.                             canvas.id = "mycanvas";    
  17.                             //document.body.appendChild(canvas);    
  18.                             //生成base64图片数据    
  19.                             var dataUrl = canvas.toDataURL();    
  20.                             var newImg = document.createElement("img");    
  21.                             newImg.src =  dataUrl;    
  22.                             document.body.appendChild(newImg);    
  23.                         }    
  24.                     });    
  25.                 });     
  26.     });    
  27.         </script>    
  28.     </head>    
  29.     <body>    
  30.              
  31.         Hello!    
  32.         <div class="" style="background-color: #abc;">    
  33.             计算机天堂测试html5页面截图    
  34.             <br>jsjtt.com    
  35.         </div>    
  36.              
  37.         <textArea id="textArea" col="20" rows="10" ></textArea>    
  38.         <input class="example1" type="button" value="button">    
  39.         生成界面如下:    
  40.     </body>    
  41. </html>    
这个方式有要注意的问题,是在canvas.toDataUrl()这个方法,这个方法是把canvas转换成base64码,如果你的div中是图片的话,那么这个方法是执行不成功的。另外,上面提到的导出地图的功能,因为地图是多张图片,同时图片在服务器上,所以涉及到跨域和多张图片信息的问题,这时候也是执行不成功的。

第二种

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    
  5.         <script type="text/javascript" src="html2canvas.js"></script>    
  6.     </head>  
  7.     <body>      
  8.     <h2>Output Image:</h2>  
  9.         <script>  
  10.             function cutDiv(){  
  11.                 var divContent = document.getElementById("div").innerHTML;  
  12.                 var data = "data:image/svg+xml," +  
  13.                 "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +  
  14.                 "<foreignObject width='100%' height='100%'>" +  
  15.                 "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +  
  16.                 divContent +  
  17.                 "</div>" +  
  18.                 "</foreignObject>" +  
  19.                 "</svg>";  
  20.                 var img = new Image();  
  21.                 img.src = data;  
  22.                 var canvas = document.createElement("canvas");  
  23.                 var ctx =  canvas.getContext("2d");  
  24.                 img.crossOrigin="anonymous";  
  25.                 img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";  
  26.                 ctx.drawImage(img, 0, 0);  
  27.                 var canvasbase = canvas.toDataURL();  
  28.                 alert(canvasbase);  
  29.             }  
  30.               
  31.         </script>  
  32.         <div id="div">  
  33.             <img src="Koala.jpg" style="width:400px;height:300px"/>  
  34.         </div>  
  35.         <input type="button" value="click" onclick="cutDiv()"/>  
  36.     </body>  
  37. </html>  

这种是先把html拼接为svg,然后将组成的svg串赋给一个img的src,然后在画布上画出这个img,最后执行canvas的toDataUrl方法来获得base64码。


    这种方式也没能成功导出地图,地图是openlayers做的,本身就是svg,在ctx.drawImage()方法执行时,出现错误,所以没成功。


    对于其他比较常用的情况,上面两种转换效果还是蛮好的,如果有用得到的只管拿走;如果上面写的有什么不合适的,请批评指正;另外如果有做过导出地图为图片到word文档的,希望您能不吝赐教,谢谢。


转自:http://blog.csdn.NET/fengyao1995/article/details/51842486


使用html2canvas时,使用的是本地图片,但还是出现错误:Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

于是通过本地服务器localhost打开html文件,上面的错误就没有了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值