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

server/2024/11/16 23:09:53/

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.ppmy.cn/server/142486.html

相关文章

【网络安全 | 漏洞挖掘】Google SSO用户的帐户接管

未经许可,不得转载。 文章目录 DOM XSS获取 CSRF Token解除Google账户绑定在这篇博文中,我将详细介绍找到针对Google SSO用户的账号接管(ATO)漏洞的过程。 DOM XSS 我遇到 DOM XSS 漏洞的位置非常微妙,因为我遇到了非常严格的WAF。 获取 CSRF Token 在找到XSS漏洞后,我…

Rust泛型系统类型推导原理(Rust类型推导、泛型类型推导、泛型推导)为什么在某些情况必须手动添加泛型特征约束?(泛型trait约束)

文章目录 示例代码疑问&#xff1a;代码不是能知道我要打印的是&[i32]吗&#xff1f;为啥非得要我加了: std::fmt::Debug它才能编译通过&#xff1f;答1. **Rust 泛型系统的类型推导**2. **为什么要加 T: std::fmt::Debug**3. **编译器如何处理泛型和 trait 约束**4. **Rus…

解答疑问,为什么在本地明明拉取了镜像,但是k8s-pod依旧ImagePullBackOff

一、根因 1、被namespace隔离了。 2、没错&#xff0c;ORI也有隔离性。 3、Kubernetes默认工作的namespace为k8s.io。 4、而部分工具运行的ns 为default.比如nerdctl 二、主流工具案例 ctr 和nerdctl可以管理ori 的 namespace. crictl则不行默认就是k8s.io。 这里注意&#…

入门车载以太网(4) -- 传输层(TCP\UDP)

目录 1.ECU通信方式的变化 2.传输层概述 2.1 UDP 2.2 TCP 3. TCP和ISO 15765-2 1.ECU通信方式的变化 我们先回顾下两种通信方式&#xff1a;Signal-Based Messaging、Service-Based Messaging。 Signal-Based Messaging 基于信号的通信方式&#xff0c;例如CAN通信&…

Mac终端字体高亮、提示插件

一、安装配置“oh my zsh” 1.1 安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 按照步骤安装即可&#xff0c;安装完成查看版本 brew -v 1.2 安装zsh brew install zsh 安装完成后查看版本 zsh --version 1.3 …

HarmonyOs DevEco Studio小技巧31--画布组件Canvas

那天我们用画布实现了文字颜色的渐变&#xff0c;实际上画布还有很多好玩的功能&#xff0c;接下来让我们一起试一下画布怎么玩 Canvas 提供画布组件&#xff0c;用于自定义绘制图形。 接口 Canvas Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext…

element plus的表格内容自动滚动

<el-table:data"tableData"ref"tableRef"borderstyle"width: 100%"height"150"><el-table-column prop"date" label"名称" width"250" /><el-table-column prop"name" label&…

大数据实训室建设的必要性

一、大数据发展的背景 大数据作为当今信息技术领域的核心驱动力&#xff0c;正在深刻地改变着社会的各个方面。它不仅仅是指数据量庞大&#xff0c;更重要的是指数据的多样性、实时性和复杂性。随着云计算、物联网等技术的迅猛发展&#xff0c;大数据已成为推动经济社会发展的…