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

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

html 复制代码
<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名

html 复制代码
<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上面会显示

html 复制代码
<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"

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

html 复制代码
<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"就行了 ,没想到是一开始认为不是这个问题,然后就没管,哎,所以说咱们这行要不断的尝试才行

相关推荐
东巴图8 小时前
分解如何利用c++修复小程序的BUG
开发语言·c++·bug
workflower3 天前
Fundamentals of Architectural Styles and patterns
开发语言·算法·django·bug·结对编程
lvchaoq3 天前
记录小程序真机bug,而模拟器无法复现
小程序·bug
喜欢便码3 天前
禅道提交bug的几种状态
bug
从前慢,现在也慢3 天前
(3)Bug篇
学习·bug·测试
西柚小萌新4 天前
【Bug:docker】--Docker国内镜像源加载失败
docker·容器·bug
初圣魔门首席弟子6 天前
c++ bug 记录(merge函数调用时错误地传入了vector对象而非迭代器。)
java·c++·bug
Qiuner6 天前
历劫波,明真我——Debug Commune
ai·开源·bug·debug·信息差·信息·交流
川石课堂软件测试8 天前
什么是BUG,你对BUG的了解有多少?
android·linux·服务器·python·功能测试·bug·安全性测试