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>
相关文章推荐
- JS 使用html2canvas实现页面截图功能
- java 使用html2canvas实现屏幕截图
- html2canvas 实现纯JS网页截图简单例子
- 微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案
- 使用js实现html锚功能,可以任意定位锚的位置,比锚更加灵活
- Web开发之html2canvas 实现纯JS网页截图简单例子
- html2canvas 实现纯JS网页截图简单例子
- HTML使用Canvas实现弹幕功能
- MFC使用CEF并实现js与C++交互功能,解决Render进程中OnContextCreated绑定与OnWebKitInitialized的js扩展无法回调问题
- 使用html2canvas截图不全问题解决方案——经测可用
- 【源码】实现Android闹钟功能使用HTML+JS,并附带Alarm代码分享
- MFC使用CEF并实现js与C++交互功能,解决Render进程中OnContextCreated绑定与OnWebKitInitialized的js扩展无法回调问题
- 【源码】实现Android闹钟功能使用HTML+JS,并附带Alarm代码分享
- 使用js实现复制到粘贴板的功能
- 使用php 的缓冲区功能和apache的url重写功能实现静态html生成实例
- Js实现Repeater全选/反选 功能 终极解决方案
- js 静态HTML表格排序功能实现
- 使用cookies实现浏览历史记录功能
- 奇怪的问题,关于js+css实现页面内容高度自适应的两种解决方案
- html+javascript实现带有预览功能的上传表单的问题(望高手们给指教)