Wxml2Canvas小程序将dom转为图片，bug总结

1.显示文字 标签上面使用 data-type="text" 加上class名 

<view data-type="text" class="my_draw_canvas">
    <text data-type="text" class="center my_draw_canvas" data-text="企业出游证明">企业出游证明</text>
</view>

2.显示图片/背景图 标签上面需要使用 data-background-image=“路径” 加上class名 

<image data-background-image="../../static/xxx.png" class="my_draw_canvas" src="../../static/lanse.png" style="background-size: 100% 100%; width: 100%;height: 100rpx" mode=""></image>

当然也可以只写data-background-image=“路径” 加上class名  只不过是在原本的样式上面不显示而已，在canvas上面会显示

<image data-background-image="../../static/xxx.png" class="my_draw_canvas" src="" style="background-size: 100% 100%; width: 100%;height: 100rpx" mode=""></image>

3.当出现开发工具上面显示正常，在不同手机上面显示不正常的时候需要加上 data-delay="1"

这个意思是等加载完后在显示

<view data-type="text" data-background-image="../../static/baise.png" data-delay="1" class="boxDown my_draw_canvas">
    
</view>

这里我用 data-delay="1"的时候还在标签上面加了data-background-image="../../static/baise.png"

一开始是有的手机上面显示的黑色背景，然后文字也是黑色的就导致全屏黑，所以加了一个白色背景图，但是我把这个白色背景图换成蓝色的时候还一样显示的是白色，不知为什么

下面是我做这个功能的经历，不重要：
我在做项目的时候遇到一个需求是将一个动态dom保存成图片这个功能，一开始想着要用canvas一点一点的去画，但是考虑到是动态的，这就导致会很麻烦，所以在网上到处查找资料，先是找到了html2Canvas，调试半天一直报错，最后看文档...还家伙不支持小程序，离大谱！后来又找到了Wxml2Canvas，然后就调试了一下，没想到直接白屏，但是能保存图片了，有希望，然后在去查找相关文档，结果发现每个文字标签上面都需要有 data-type="text" class="可以都个类名  my_draw_canvas（自定义）"每个图片 / 背景图 标签上面都需要有 data-background-image="路径" class="可以都个类名 my_draw_canvas（自定义）"，然后试了一下，好家伙真机调试完全1：1还原，然后在手机上试了一下，每个手机的效果都不一样，然后就又在网上查资料，找了3遍还没解决，最后我甚至还改了底层插件都不行，最后没办法了，把网上找的每个办法都试一遍，好家伙，解决了！在外面的盒子加一个data-delay="1"就行了 ，没想到是一开始认为不是这个问题，然后就没管，哎，所以说咱们这行要不断的尝试才行

原文地址：https://blog.csdn.net/m0_72603435/article/details/143708626

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！