JS 使用html2canvas实现截图功能的问题记录和解决方案
2024-08-24 14:09:33
在实现“截图”功能时,遇到几个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>
最新文章
- Atom支持Markdown和Latex
- cmd执行mysql操作
- BZOJ 4245: [ONTAK2015]OR-XOR
- iOS开发UI篇—在UIImageView中添加按钮以及Tag的参数说明
- C#设计模式——模板方法(Template Method)
- Oracle表空间管理
- 05-UIKit绘图演练
- Android窗口为弹出框样式
- linux tomcat自启动设置
- NPOI读写Excel0307
- linux多线程示例
- 也来谈谈IT培训
- 要让CLR挂掉的话……
- python kafka权限校验client.id
- 关于 IdentityServer4 中的 Jwt Token 与 Reference Token
- ITEXT5.5.8转html为pdf文档解决linux不显示中文问题
- Linux常用的基础组件
- ORA-12801/ORA-12853: insufficient memory for PX buffers: current 274880K, max needed 19722240K/ORA-04031解决方法
- java中逗号分隔的字符串和List相互转换
- MQTT--入门【转】
热门文章
- IBM Thread and Monitor Dump Analyzer for Java解决生产环境中的性能问题
- tex---就是tex文件,这个地球人都知道,是文章所在的主要文件
- iOS:使用NSRegularExpression正则去掉一串字符串中所有的特殊字符和标点
- MSVC 12: compiler error in boost/type_traits/common_type.hpp
- SSE图像算法优化系列一:一段BGR2Y的SIMD代码解析。
- 用MATLAB生成模糊控制离线查询表
- sublime 3插件推荐
- 20151028整理罗列某种开发所包括对技术(技术栈),“较为全面”地表述各种技术大系的图表:系统开发技术栈图、Web前端技术栈图、数据库技术栈图、.NET技术栈图
- EF+LINQ事物处理
- 转 可能是最漂亮的Spring事务管理