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

相关文章:

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"企业出游证明">企业出游证明…...

[ 网络安全介绍 3 ] 网络安全事件相关案例有哪些?

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

SpringMVC学习笔记(二)

五、Rest风格编程 &#xff08;一&#xff09;Rest风格URL规范介绍 1、什么是restful RESTful架构&#xff0c;就是目前最流行的一种互联网软件架构风格。它结构清晰、符合标准、易于理解、扩展方便&#xff0c;所以正得到越来越多网站的采用。REST这个词&#xff0c;是Roy T…...

51c嵌入式~单片机合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/12362395 一、不同的电平信号的MCU怎么通信&#xff1f; 下面这个“电平转换”电路&#xff0c;理解后令人心情愉快。电路设计其实也可以很有趣。 先说一说这个电路的用途&#xff1a;当两个MCU在不同的工作电压下工作&…...

JavaScript:浏览器对象模型BOM

BOM介绍 浏览器对象模型&#xff08;Brower Object Model&#xff0c;BOM&#xff09;提供了独立于内容而与浏览器窗口进行交互的对象&#xff0c;其核心对象是window BOM由一系列相关的对象构成&#xff0c;并且每个对象都提供了很多方法和属性。 BOM与DOM区别 DOM是文档对…...

Unity音频导入设置

参考&#xff1a;unity官方文档 导入设置 Force To Mono&#xff1a;强制单声道。启用后音频片段将降混为单声道声音。可以节省该资源所占据的空间。 Normalize&#xff1a;峰值归一化。降混过程通常会导致信号比原始信号更安静。峰值归一化的信号为音频源的音量属性提供了后…...

【数据分享】中国对外投资合作发展报告(2013-2023)

数据介绍 绪 论............................................................................................................................. 1 对外投资合作高质量发展迈出新步伐................................................................... 2 第一篇 发…...

java8之Stream流

文章目录 Stream流的定义和特性‌定义特性‌中间操作‌终结操作‌ 生成流forEachmapfilterlimitsorted并行&#xff08;parallel&#xff09;程序Collectors Stream流的定义和特性‌ 定义 Stream是Java 8 API添加的一个新的抽象&#xff0c;用于以声明性方式处理数据集合。它…...

pipx安装提示找不到包

执行&#xff1a; pipx install --include-deps --force "ansible6.*"WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConnection …...

Codeforces Round 987 (Div. 2)(前四道)

A. Penchick and Modern Monument 翻译&#xff1a; 在繁华大都市马尼拉的摩天大楼中&#xff0c;菲律宾最新的 Noiph 购物中心刚刚竣工&#xff01;建筑管理方 Penchick 订购了一座由 n 根支柱组成的先进纪念碑。 纪念碑支柱的高度可以用一个由 n 个正整数组成的数组 h 来表示…...

PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB生产ERP系统的智能拼版技术&#xff0c;是基于PCB前端报价系统获取到的用户或市场人员已录入系统的板子尺寸及set参数等&#xff0c;按照最优原则或利用率最大化原则自动进行计算并输出拼版样式图和板材利用率&#xff0c;提高工程人员效率&#xff0c;减少板材的浪费。覆铜…...

微信小程序_小程序视图与逻辑_day3

一、目标 A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期 二、目录 A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活&#xff08;列表页面&#xff09;…...

kubesphere环境-本地Harbor仓库+k8s集群(单master 多master)+Prometheus监控平台部署

前言&#xff1a;半月前在公司生产环境上离线部署了k8s集群Victoria Metrics(二开版)自研版夜莺 监控平台的搭建&#xff0c;下面我租用3台华为云服务器演示部署kubesphere环境-本地Harbor仓库k8s集群&#xff08;单master节点 & 单master节点&#xff09;Prometheus监控部…...

【提高篇】3.3 GPIO(三,工作模式详解 上)

目录 一,工作模式介绍 二,输入浮空 2.1 输入浮空简介 2.2 输入浮空特点 2.3 按键检测示例 2.4 高阻态 三,输入上拉 3.1 输入上拉简介 3.2 输入上拉的特点 3.3 按键检测示例 四,输入下拉 4.1 输入下拉简介 4.2 输入下拉特点 4.3 按键检测示例 一,工作模式介绍…...

‘视’不可挡:OAK相机助力无人机智控飞行!

南京邮电大学通达学院的刘同学用我们的oak-d-lite实现精确打击无人机的避障和目标识别定位功能&#xff0c;取得了比赛冠军。我们盼望着更多的朋友们能够加入到我们OAK的队伍中来&#xff0c;参与到各式各样的比赛中去。我们相信&#xff0c;有了我们相机的助力&#xff0c;大家…...

javaScript交互补充(元素的三大系列)

1、元素的三大系列 1.1、offset系列 1.1.1、offset初相识 使用offset系列相关属性可以动态的得到该元素的位置&#xff08;偏移&#xff09;、大小等 获得元素距离带有定位祖先元素的位置获得元素自身的大小&#xff08;宽度高度&#xff09;注意&#xff1a;返回的数值都不…...

数据结构(基本概念及顺序表)

基本概念&#xff1a; 1、引入 程序数据结构算法 数据&#xff1a; 数值数据&#xff1a;能够直接参加运算的数据&#xff08;数值&#xff0c;字符&#xff09; 非数值数据&#xff1a;不能够直接参加运算的数据&#xff08;字符串、图片等&#xff09; 数据即是信息的载…...

【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南

一、CentOS 7下载源 华为源&#xff1a;https://mirrors.huaweicloud.com/centos/7/isos/x86_64/ 阿里云源&#xff1a;centos-vault-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云 百度网盘源&#xff1a;https://pan.baidu.com/s/1MjFPWS2P2pIRMLA2ioDlVg?pwdfudi &…...

html + css 自适应首页布局案例

文章目录 前言一、组成二、代码1. css 样式2. body 内容3.全部整体 三、效果 前言 一个自适应的html布局 一、组成 整体居中&#xff0c;宽度1200px&#xff0c;小屏幕宽度100% 二、代码 1. css 样式 代码如下&#xff08;示例&#xff09;&#xff1a; <style>* {…...

时钟之CSS+JS版

写在前面 此版本绘制的时钟基于CSSJS模式。 优点操作简单&#xff0c;缺点当然是不够灵活。下一篇会基于HTML5的canvas标签&#xff0c;使用JS绘制。会更灵活&#xff0c;元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...

FPGA设计中的组合逻辑环:为什么你的Verilog代码会引发警告?

FPGA设计中的组合逻辑环&#xff1a;为什么你的Verilog代码会引发警告&#xff1f; 在数字电路设计的浩瀚海洋中&#xff0c;组合逻辑环&#xff08;Combinational Loop&#xff09;就像是一个潜伏的暗礁&#xff0c;看似无害却可能让你的整个设计"触礁沉没"。作为一…...

【花雕学AI】打破AI轻量化极限!MimiClaw:5美元芯片上跑的纯 C 轻量 AI 智能体

提到AI智能体&#xff0c;很多人的第一印象是“需要高性能服务器支撑”“离不开复杂操作系统”“功耗高到不敢长时间运行”——但MimiClaw的出现&#xff0c;彻底打破了这种固有认知。作为全球首个能在仅售5美元的ESP32-S3芯片上流畅运行的纯C编写轻量AI智能体&#xff0c;Mimi…...

InstructPix2Pix在.NET平台的应用开发实战

InstructPix2Pix在.NET平台的应用开发实战 1. 引言&#xff1a;当AI修图遇上.NET开发 想象一下这样的场景&#xff1a;电商平台的商品图片需要批量调整风格&#xff0c;摄影工作室想要快速实现创意效果&#xff0c;或者内容创作者需要即时编辑社交媒体图片。传统图像处理方式…...

破解代码智能壁垒:DeepSeek-Coder-V2实战指南与开源优势深度解析

破解代码智能壁垒&#xff1a;DeepSeek-Coder-V2实战指南与开源优势深度解析 【免费下载链接】DeepSeek-Coder-V2 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Coder-V2 面对日益复杂的软件开发需求&#xff0c;开发者们常常在代码生成质量、多语言支持…...

从零开始学SCL:手把手教你实现天塔之光、数码管显示等工业控制案例(含避坑指南)

从零开始学SCL&#xff1a;手把手教你实现天塔之光、数码管显示等工业控制案例&#xff08;含避坑指南&#xff09; 工业自动化领域中&#xff0c;PLC编程是核心技能之一。而SCL&#xff08;Structured Control Language&#xff09;作为IEC 61131-3标准中的高级文本语言&#…...

如何快速上手Notepad--:3步完成跨平台文本编辑器的配置与使用

如何快速上手Notepad--&#xff1a;3步完成跨平台文本编辑器的配置与使用 【免费下载链接】notepad-- 一个支持windows/linux/mac的文本编辑器&#xff0c;目标是做中国人自己的编辑器&#xff0c;来自中国。 项目地址: https://gitcode.com/GitHub_Trending/no/notepad-- …...

终极指南:Windows免费倒计时神器Hourglass,5分钟从新手到高手

终极指南&#xff1a;Windows免费倒计时神器Hourglass&#xff0c;5分钟从新手到高手 【免费下载链接】hourglass The simple countdown timer for Windows. 项目地址: https://gitcode.com/gh_mirrors/ho/hourglass 还在为Windows系统找不到好用的倒计时工具而烦恼吗&a…...

保姆级教程:深求·墨鉴Podman部署全流程,小白也能轻松搞定

保姆级教程&#xff1a;深求墨鉴Podman部署全流程&#xff0c;小白也能轻松搞定 1. 为什么选择Podman部署深求墨鉴&#xff1f; 传统Docker部署方式虽然常见&#xff0c;但对于深求墨鉴这样的轻量级OCR工具来说&#xff0c;Podman提供了更优雅的解决方案。Podman是一款无需守…...

51页可编辑PPT | 农产品区块链溯源信息化平台整体解决方案

许多公司在数字化转型的过程中&#xff0c;常常面临数据孤岛、流程效率低下和客户体验不佳等问题。这些问题导致决策缓慢&#xff0c;难以快速响应市场变化&#xff0c;最终影响公司竞争力。方案的核心目标是帮助企业通过整合数据、优化流程和提升客户体验&#xff0c;实现数字…...

Bolts-ObjC终极迁移指南:从1.8.x到1.9.1的平滑升级方案

Bolts-ObjC终极迁移指南&#xff1a;从1.8.x到1.9.1的平滑升级方案 【免费下载链接】Bolts-ObjC Bolts is a collection of low-level libraries designed to make developing mobile apps easier. 项目地址: https://gitcode.com/gh_mirrors/bo/Bolts-ObjC Bolts-ObjC是…...