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

最新推荐文章于 2024-07-25 16:01:10 发布

well2049

最新推荐文章于 2024-07-25 16:01:10 发布

阅读量5.9k

点赞数 1

分类专栏： javaScript 文章标签： js html2canvas

本文链接：https://blog.csdn.net/well2049/article/details/80401938

版权

javaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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

well2049

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html2canvas 将html代码转为图片并保存下来

只是测试了下，在谷歌和360上都可以，但是在火狐和ie下面暂时没有效果，所以先做个小记录，等解决ie了，再补充。&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta name="layout" content="main"&gt; &lt;meta http-equiv="Content-Type" c
复制链接

扫一扫

专栏目录