zoukankan      html  css  js  c++  java
  • JS如何导出Div的内容为图片

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

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

    第一种

     
    <html>    
        <head>    
            <meta name="layout" content="main">    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
            <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    
            <script type="text/javascript" src="html2canvas.js"></script>    
                 
            <script  type="text/javascript" >    
        $(document).ready( function(){    
                    $(".button").on("click", function(event) {    
                            event.preventDefault();    
                            html2canvas(document.getElementById("textArea"), {    
                            allowTaint: true,    
                            taintTest: false,    
                            onrendered: function(canvas) {    
                                canvas.id = "mycanvas";    
                                //生成base64图片数据    
                                var dataUrl = canvas.toDataURL();    
                                var newImg = document.createElement("img");    
                                newImg.src =  dataUrl;    
                                document.body.appendChild(newImg);    
                            }    
                        });    
                    });     
        });    
            </script>    
        </head>    
        <body>     
            <div class="" style="background-color: white;">     
                测试图片  
            </div>    
                 
            <textArea id="textArea" col="20" rows="10" ></textArea>    
            <input class="button" type="button" value="button">测试</input>    
        </body>    
    </html>    

        这个方式有要注意的问题,是在canvas.toDataUrl()这个方法,这个方法是把canvas转换成base64码,如果你的div中是图片的话,那么这个方法是执行不成功的。另外,上面提到的导出地图的功能,因为地图是多张图片,同时图片在服务器上,所以涉及到跨域和多张图片信息的问题,这时候也是执行不成功的。

    第二种

    <!DOCTYPE html>  
    <html>  
        <head>  
            <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    
            <script type="text/javascript" src="html2canvas.js"></script>    
        </head>  
        <body>      
        <h2>Output Image:</h2>  
            <script>  
                function cutDiv(){  
                    var divContent = document.getElementById("div").innerHTML;  
                    var data = "data:image/svg+xml," +  
                    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +  
                    "<foreignObject width='100%' height='100%'>" +  
                    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +  
                    divContent +  
                    "</div>" +  
                    "</foreignObject>" +  
                    "</svg>";  
                    var img = new Image();  
                    img.src = data;  
                    var canvas = document.createElement("canvas");  
                    var ctx =  canvas.getContext("2d");  
                    img.crossOrigin="anonymous";  
                    img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";  
                    ctx.drawImage(img, 0, 0);  
                    var canvasbase = canvas.toDataURL();  
                    alert(canvasbase);  
                }  
                  
            </script>  
            <div id="div">  
                <img src="Koala.jpg" style="400px;height:300px"/>  
            </div>  
            <input type="button" value="click" onclick="cutDiv()"/>  
        </body>  
    </html>  
    

      

        

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

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

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

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

  • 相关阅读:
    26 转义符 re模块 方法 random模块 collection模块的Counter方法
    25 正则表达式
    24 from 模块 import 名字
    24 from 模块 import 名字
    24 from 模块 import 名字
    23 析构方法 items系列 hash方法 eq方法
    21 isinstance issubclass 反射 _str_ _new_ _len_ _call_
    20 属性, 类方法, 静态方法. python2与python3的区别.
    python(1)
    python之字符串格式化
  • 原文地址:https://www.cnblogs.com/white0710/p/7235014.html
Copyright © 2011-2022 走看看