您的位置:首页 > Web前端 > JavaScript

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

2018-05-16 14:05 1311 查看

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

下面给大家分享下:

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

浏览器会提示下面的错误

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

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

 

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

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

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

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

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

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

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

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

 

3、文本样式错乱

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

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

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

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

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: