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

相关推荐
越学不动啦2 小时前
四、Bug篇+用例篇
软件测试·测试用例·bug·软件工程·测试基础
有时间要学习2 小时前
Test——BUG篇
bug·测试
猫猫头有亿点炸2 天前
电脑连不上手机热点会出现的小bug
bug
不想加班的码小牛3 天前
第4期:重构软件测试体系——生成式AI如何让BUG无所遁形
人工智能·重构·bug·集成测试
limanjihe3 天前
PrimeTime生成.lib竟暗藏PG添加Bug
bug
Java手札5 天前
【bug】Cannot connect to already running IDE instance.SocketTimeoutException
ide·bug
妄想出头的工业炼药师5 天前
pcl 1.14.1 vs2022 Eigen::internal::aligned_free bug
bug
小海海不怕困难5 天前
xxljob阻塞处理策略设置为单机串行导致的bug
bug
Littlehero_1215 天前
关于bug总结记录
bug
深度Linux6 天前
告别代码Bug,GDB调试工具详解
linux内核·bug·内核调试