html2canvas中toDataURL方法返回值为：data,解决方案

阅文时长	| 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方案

这个方案我没有实践过，但理论上是可行的。时间有限只说思路，有两个思路：

1. 博主认为如果我们用一个变量构建此dom元素。然后把其样式都设置为可见，再用这个变量走html2canvas的toDataURL方法。
2. 如果上述不可行，则可能需要在dom树中实际添加一个元素，但这个元素我们把它的样式改为绝对路径，且置于底层（即调整zindex）。这样做的目的虽然我们在dom树上加了一个元素，但是期望让前端界面无感知。构建好后使用这个元素走html2canvas的toDataURL方法。获取Base64字符串后再删除此元素。
3. 如果各位大佬有空按上述方式实践不行，可以联系博主我们一块研究，当然有解决方案也可以联系我。

三、声明与参考资料   完成度：100%

原创博文，未经许可请勿转载。

如有帮助，欢迎点赞、收藏、关注。如有问题，请评论留言！如需与博主联系的，直接博客私信SCscHero即可。