| 阅文时长 | | 0.35分钟 | 字数统计 | | 572字符 |
| 主要内容 | | 1、引言&背景 2、解决方案 3、声明与参考资料 | ||
| 『html2canvas中toDataURL方法返回值为：data,解决方案』 | |||
| 编写人 | | SCscHero | 编写时间 | | 2022/6/1 PM11:13 |
| 文章类型 | | 系列 | 完成度 | | 已完成 |
| 座右铭 | 每一个伟大的事业，都有一个微不足道的开始。 | ||
一、引言&背景 完成度：100%
a) 应对问题
html2canvas插件中toDataURL方法返回值为：data:,的解决方案？
b) 应用场景
- 使用html2canvas需要将dom元素保存成图片的场景中。
c) 解决方案概述
博主前端用了elementUI组件，需要保存的dom元素是el-tabs下其中一个el-tab-pane。而触发保存图片的button是在另外一个el-tab-pane，点击这个button的时候，另一个el-tab-pane是隐藏的。因此返回的是data:,。换句话说，需要保存的元素需是呈现在屏幕上的，如果是被css3隐藏的情况则会返回data:,。
二、解决方案 完成度：100%
a) WorkAround解决方案
博主是先切换到图片所在的el-tab-pane位置，然后再做的Action。这样实际用户会有感知：tab切换了一下，为此我加了一个Loading，比较妥善的解决了。切换到图片所在的tab后，toDataURL方法返回的就是一个base64的字符串了，我们赋给img标签的src就可以正常构建一张图片了。
b) LTS方案
这个方案我没有实践过，但理论上是可行的。时间有限只说思路，有两个思路：
- 博主认为如果我们用一个变量构建此dom元素。然后把其样式都设置为可见，再用这个变量走html2canvas的toDataURL方法。
- 如果上述不可行，则可能需要在dom树中实际添加一个元素，但这个元素我们把它的样式改为绝对路径，且置于底层（即调整zindex）。这样做的目的虽然我们在dom树上加了一个元素，但是期望让前端界面无感知。构建好后使用这个元素走html2canvas的toDataURL方法。获取Base64字符串后再删除此元素。
- 如果各位大佬有空按上述方式实践不行，可以联系博主我们一块研究，当然有解决方案也可以联系我。
三、声明与参考资料 完成度：100%
原创博文，未经许可请勿转载。
如有帮助，欢迎点赞、收藏、关注。如有问题，请评论留言！如需与博主联系的，直接博客私信SCscHero即可。