JS 使用html2canvas实现截图功能的问题记录和解决方案

时间:2022-09-09 11:42:08

在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了;

下面给大家分享下:

1、"图片资源跨域",导致无法截图。

浏览器会提示下面的错误

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决方案:将跨域图片转换成base64,然后使用base64渲染img标签;具体方法:http://www.cnblogs.com/minigrasshopper/p/9042686.html

2、截图不完整(宽度方向偶尔不完全)

需要截图的容器,必须渲染在页面中才可以,也就是说挂在DOM树上(display: none;这样是不行的);

由于被截图的容器,我不想让它展示在视图中,所以我写了如下样式

.capture{
position: absolute;
opacity: ;
z-index: -;
}

但是,发现截图偶尔宽度不完整,原因很简单,因为被截图的容器超出了“视口”的可视范围(定位的问题);

总结:被截图的容器,必须挂在“DOM树”上,并且必须在“视口”范围中;

对样式做修改,改成fixed,这样相对于body定位;同时设置left、top;(如果被截图的容器高度超出了视口,那就再说吧)

.capture{
position: fixed;
opacity: ;
z-index: -;
left: ;
top: ;
}

3、文本样式错乱

下面的代码,在html2canvas截图后,发现p标签的样式正确;h6标签的样式不对

原因:canvas绘制中,会将h6的换行绘制进去;

解决方法:标签和内容之间不换行,如P标签

<p></p>
<h6> </h6>