当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/485273.html

相关文章:

  • [ 网络安全介绍 3 ] 网络安全事件相关案例有哪些?
  • SpringMVC学习笔记(二)
  • 51c嵌入式~单片机合集2
  • JavaScript:浏览器对象模型BOM
  • Unity音频导入设置
  • 【数据分享】中国对外投资合作发展报告(2013-2023)
  • java8之Stream流
  • pipx安装提示找不到包
  • Codeforces Round 987 (Div. 2)(前四道)
  • PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级
  • 微信小程序_小程序视图与逻辑_day3
  • kubesphere环境-本地Harbor仓库+k8s集群(单master 多master)+Prometheus监控平台部署
  • 【提高篇】3.3 GPIO(三,工作模式详解 上)
  • ‘视’不可挡:OAK相机助力无人机智控飞行!
  • javaScript交互补充(元素的三大系列)
  • 数据结构(基本概念及顺序表)
  • 【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南
  • html + css 自适应首页布局案例
  • 时钟之CSS+JS版
  • ubuntu18.04 配置安卓编译环境
  • pycharm分支提交操作
  • ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15
  • Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真
  • 2024年11月15日
  • websocket初始化
  • uniapp ios app以framwork形式接入sentry
  • ⾃动化运维利器Ansible-基础
  • 若依笔记(十一):芋道多租户限制与修改
  • hive 统计各项目下排名前5的问题种类
  • HBase 安装与基本操作指南