html2canvas 將html代碼轉爲圖片並保存下來

只是測試了下,在 谷歌和360上都可以,但是在火狐和ie下面暫時沒有效果,所以先做個小記錄,等解決ie了,再補充。

<!DOCTYPE html>  
    <head>  
        <meta name="layout" content="main">  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
        <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
        <script type="text/javascript" src="html2canvas.min.js"></script>        
    </head>  
    <body>   
        <div class="" style="background-color: white;">   
            測試圖片
        </div>  

        <textArea id="textArea" col="20" rows="10" >85488545878445</textArea>  
        <input class="button" type="button" value="button" onclick="downloadForJS()">測試</input>  
    </body> 
    <script type="text/javascript">
        function downloadForJS(){
          //使用html2canvas 轉換html爲canvas
          html2canvas(document.body).then(function(canvas) { 

            var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url  
          var saveLink = document.createElement( 'a');
                saveLink.href =imgUri;
                saveLink.download = 'logo.png';
                    saveLink.click();
                /*console.log(imgUri); */ 
            });
        }
    </script>
</html>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章