欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

html2canvas 采坑

发布时间:2022/11/16 HTML 19 老码农
如意编程网 收集整理的这篇文章主要介绍了 html2canvas 采坑 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.需要将要转换成图片的区域div放置在body中,且需要display为block;

2.图片跨域的问题:将icon转换为base64

3.截图不全:新版本插件不稳定,建议

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-alpha1/html2canvas.min.js"></script> 多尝试几个版本
document.querySelector("#slot").innerHTML = dom;
        document.querySelector("#share-module").style.display = "flex";
         setTimeout(function(){
            html2canvas(document.querySelector("#html2canvas"),{useCORS:true}).then(canvas => {
                 document.querySelector("#shareImg").src=canvas.toDataURL();
                 document.querySelector("#slot").innerHTML = "";
            });
        },10);

此处的dom为要截图的区域div;

总结

以上是如意编程网为你收集整理的html2canvas 采坑的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。