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

相关推荐
DarkAthena14 小时前
【ORACLE】记录一些ORACLE的merge into语句的BUG
数据库·oracle·bug
猫猫头有亿点炸15 小时前
大数据可能出现的bug之flume
大数据·bug·flume
PLUS_WAVE15 小时前
【CUDA 编译 bug】ld: cannot find -lcudart
服务器·c++·bug·环境·编译·cuda·ld
宁酱醇1 天前
各种各样的bug合集
开发语言·笔记·python·gitlab·bug
有什么东东1 天前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
软件技术NINI1 天前
详解BUG(又名:BUG的生命周期)
bug
兮动人1 天前
Idea使用github copilot登录bug+解决方案
github·bug·intellij-idea
Macle_Chen1 天前
ios开发中xxx.debug.dylib not found
ios·bug·debug.dylib
福大大架构师每日一题2 天前
docker v28.1.1 正式发布!修复关键Bug,网络与安全性再升级
网络·docker·bug
小徐Chao努力2 天前
【记录手贱bug日常】IDEA 配置vmoptions后打不开,重新安装,删注册表均无用
java·bug·intellij-idea