html2canvas 将html代码转为图片并保存下来

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/well2049/article/details/80401938

只是测试了下,在 谷歌和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>  

猜你喜欢

转载自blog.csdn.net/well2049/article/details/80401938