| 0.35分钟
| 572字符
| 1、引言&背景 2、解决方案 3、声明与参考资料
| SCscHero
| 2022/6/1 PM11:13
| 系列
| 已完成
每一个伟大的事业，都有一个微不足道的开始。
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:,。
a) WorkAround解决方案
博主是先切换到图片所在的el-tab-pane位置，然后再做的Action。这样实际用户会有感知：tab切换了一下，为此我加了一个Loading，比较妥善的解决了。切换到图片所在的tab后，toDataURL方法返回的就是一个base64的字符串了，我们赋给img标签的src就可以正常构建一张图片了。
b) LTS方案
这个方案我没有实践过，但理论上是可行的。时间有限只说思路，有两个思路：
原创博文，未经许可请勿转载。
如有帮助，欢迎点赞、收藏、关注。如有问题，请评论留言！如需与博主联系的，直接博客私信SCscHero即可。
Original: https://www.cnblogs.com/SCscHero/p/16336951.html
Author: SCscHero
Title: html2canvas中toDataURL方法返回值为：data,解决方案
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/609363/
转载文章受原作者版权保护。转载请注明原作者出处！