JS如何導出Div的內容為圖片

本文轉載自查看原文 2017-07-25 16:45 10048 特殊場景功能

最近因為項目需要，研究了幾天用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="width: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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Lodop導出圖片，導出單頁內容的圖片 js替換div里的內容 JS/javaScript 獲取div內容 JS控制div上下滾動內容 JS把內容動態插入到DIV JS把內容動態插入到DIV JS 導出圖片，toDataURL js修改div標簽中的內容 js獲取

中的內容信息 js 復制div內容到剪切板