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

微信小程序生成二维码海报并分享

背景:点击图标,生成海报后,点击保存相册,可以保存

生成海报:插件wxa-plugin-canvas,此处使用页面异步生成组件方式,官网地址:wxa-plugin-canvas - npm

二维码:调用后端接口生成二维码

1.二维码按钮

          <!-- 二维码按钮 --><view class="item" bindtap="onCreatePoster"><van-icon name="scan" size="20px" /><view class="icon-title">二维码</view></view>

2.二维码海报显示图层

<!-- 二维码海报:注意布局要和其他元素独立 -->
<view bindtap="closePoster"><!-- 一定要设置元素的id="poster" --><poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster><view wx:if="{{posterShow}}" class="popup-mask"></view><view wx:if="{{posterShow}}" class="posterImg-box"><image mode="widthFix" class="posterImg" src="{{posterImg}}"></image><view class="btn-create" data-pic="{{basicInfo.pic}}" catchtap="savePosterPic">保存到相册</view></view>
</view>

3.点击按钮后异步生成海报

需要调用获取图片信息接口wx.getImageInfo(),获取到图片的宽高以做整体宽高配置

  /*** 异步生成海报*/async onCreatePoster() {console.log("异步生成海报");// 获取二维码信息(实质是后端生成的一张二维码图片)const qrRes = await createQRCode({id: this.data.basicInfo.id});console.log(qrRes,"qrRes");// 获取图片信息,图片获取成功后调用方法生成海报const pic = this.data.basicInfo.pic;wx.getImageInfo({src: pic,success:(res)=> {console.log(res.width)// console.log(res.height)const height = 490 * res.height / res.width// setData配置数据,数据配置完成后,生成海报this.createPosterDone(height, qrRes.data);}})},createPosterDone(picHeight,qrCode){const _this = thisconst _baseHeight = 74 + (picHeight + 120)this.setData({posterConfig: {// 海报总宽高width: 750,height: picHeight + 660,backgroundColor: '#fff',debug: false,// 图片所在容器起始位置,宽高等配置blocks: [{x: 76,y: 74,width: 604,height: picHeight + 120,borderWidth: 2,borderColor: '#c2aa85',borderRadius: 8}],// 图片配置images: [{x: 133,y: 133,url: _this.data.goodsInfoList.basicInfo.pic, // 商品图片width: 490,height: picHeight},{x: 76,y: _baseHeight + 199,url: qrCode, // 二维码width: 222,height: 222}],// 文字信息:商品标题、价格、二维码处文字texts: [{x: 375,y: _baseHeight + 80,width: 650,lineNum: 2,text: _this.data.goodsInfoList.basicInfo.name,textAlign: 'center',fontSize: 40,color: '#333'},{x: 375,y: _baseHeight + 180,text: '¥' + _this.data.goodsInfoList.basicInfo.minPrice,textAlign: 'center',fontSize: 50,color: '#e64340'},{x: 352,y: _baseHeight + 320,text: '长按识别小程序码',fontSize: 28,color: '#999'}],}}, () => {Poster.create(this.data.posterConfig, this);});},

4.海报生成成功后将海报数据(海报临时路径)和是否显示海报层,存放到data中

data:{// 二维码海报配置posterConfig:{},// poster显示标识posterShow: false,// 保存到相册的图片posterImg: ''
},onPosterSuccess(e){console.log("二维码生成成功");this.setData({posterImg: e.detail,posterShow: true})},

5.点击海报任何位置,除了保存到相册按钮,隐藏海报层

closePoster方法绑定到最外层

保存按钮使用catchbind阻止冒泡,即可防止点击保存时也会关掉海报层

<!-- 二维码海报:注意布局要和其他元素独立 -->
<view bindtap="closePoster"><!-- 一定要设置元素的id="poster" --><poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster><view wx:if="{{posterShow}}" class="popup-mask"></view><view wx:if="{{posterShow}}" class="posterImg-box"><image mode="widthFix" class="posterImg" src="{{posterImg}}"></image><view class="btn-create" data-pic="{{basicInfo.pic}}" catchtap="savePosterPic">保存到相册</view></view>
</view>
  // 关闭海报closePoster(){this.setData({posterShow: false})},

6.点击保存到相册按钮,调用wx.saveImageToPhotosAlbum()方法保存图片到本地

注意wx.saveImageToPhotosAlbum()方法的参数filePath不能是绝对路径或者网络图片,必须是临时图片。所以在生成海报成功后需要将图片保存到data的posterImg中,保存时用这个就可以了

// 保存海报到相册savePosterPic(e){console.log("保存到相册",e);console.log(this.data.posterImg);//http://tmp/xlHB02MBJ50H9887bf9a40b5b5dc24b904e4132afcb0.pngwx.saveImageToPhotosAlbum({// 不能直接使用this.data.basicInfo.pic的图片// "saveImageToPhotosAlbum:fail https://file.winwebedu.com/mall/collage-01.jpg not absolute path"filePath: this.data.posterImg,success(res) { wx.showToast({title: '保存成功',})},fail(err){console.log(err);wx.showToast({title: '保存失败',})},// 无论成功与否关闭海报complete(){this.setData({posterShow: false});}})},

7.补充,如果要直接生成二维码不使用异步

<poster class="wxcode-box" id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
onPosterSuccess(e){// console.log("二维码生成成功");const { detail } = e;console.log(detail);wx.previewImage({current: detail,urls: [detail]})},posterConfig配置:jdConfig: {width: 750,height: 1334,backgroundColor: '#fff',debug: false,pixelRatio: 1,blocks: [{width: 690,height: 808,x: 30,y: 183,borderWidth: 2,borderColor: '#f0c2a0',borderRadius: 20,},{width: 634,height: 74,x: 59,y: 770,backgroundColor: '#fff',opacity: 0.5,zIndex: 100,},],texts: [{x: 113,y: 61,baseLine: 'middle',text: '伟仔',fontSize: 32,color: '#8d8d8d',},{x: 30,y: 113,baseLine: 'top',text: '发现一个好物,推荐给你呀',fontSize: 38,color: '#080808',},{x: 92,y: 810,fontSize: 38,baseLine: 'middle',text: '标题标题标题标题标题标题标题标题标题',width: 570,lineNum: 1,color: '#8d8d8d',zIndex: 200,},{x: 59,y: 895,baseLine: 'middle',text: [{text: '2人拼',fontSize: 28,color: '#ec1731',},{text: '¥99',fontSize: 36,color: '#ec1731',marginLeft: 30,}]},{x: 522,y: 895,baseLine: 'middle',text: '已拼2件',fontSize: 28,color: '#929292',},{x: 59,y: 945,baseLine: 'middle',text: [{text: '商家发货&售后',fontSize: 28,color: '#929292',},{text: '七天退货',fontSize: 28,color: '#929292',marginLeft: 50,},{text: '运费险',fontSize: 28,color: '#929292',marginLeft: 50,},]},{x: 360,y: 1065,baseLine: 'top',text: '长按识别小程序码',fontSize: 38,color: '#080808',},{x: 360,y: 1123,baseLine: 'top',text: '超值好货一起拼',fontSize: 28,color: '#929292',},],images: [{width: 62,height: 62,x: 30,y: 30,borderRadius: 62,url: 'https://img.yzcdn.cn/vant/cat.jpeg',},{width: 634,height: 634,x: 59,y: 210,url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',},{width: 220,height: 220,x: 92,y: 1020,url: 'https://img.yzcdn.cn/vant/cat.jpeg',},{width: 750,height: 90,x: 0,y: 1244,url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',}]},

相关文章:

微信小程序生成二维码海报并分享

背景&#xff1a;点击图标&#xff0c;生成海报后&#xff0c;点击保存相册&#xff0c;可以保存 生成海报&#xff1a;插件wxa-plugin-canvas&#xff0c;此处使用页面异步生成组件方式&#xff0c;官网地址&#xff1a;wxa-plugin-canvas - npm 二维码&#xff1a;调用后端…...

Windows安装Tesseract OCR与Python中使用pytesseract进行文字识别

文章目录 前言一、下载并安装Tesseract OCR二、配置环境变量三、Python中安装使用pytesseract总结 前言 Tesseract OCR是一个开源OCR&#xff08;Optical Character Recognition&#xff09;引擎&#xff0c;用于从图像中提取文本。Pytesseract是Tesseract OCR的Python封装&am…...

【答案】2023年国赛信息安全管理与评估第三阶段夺旗挑战CTF(网络安全渗透)

【答案】2023年国赛信息安全管理与评估第三阶段夺旗挑战CTF&#xff08;网络安全渗透&#xff09; 全国职业院校技能大赛高职组信息安全管理与评估 &#xff08;赛项&#xff09; 评分标准 第三阶段 夺旗挑战CTF&#xff08;网络安全渗透&#xff09; *竞赛项目赛题* 本文…...

springboot 集成 redis luttuce redisson ,单机 集群模式(根据不同环境读取不同环境的配置)

luttuce 和redisson配置过程中实际上是独立的&#xff0c;他们两个可以同时集成&#xff0c;但是没有直接相关关系&#xff0c;配置相对独立。 所以分为Lettuce 和 Redisson 两套配置 父pom <!-- Spring Data Redis --><dependency><groupId>org.springframe…...

PPT插件-好用的插件-PPT 素材该怎么积累-大珩助手

PPT 素材该怎么积累&#xff1f; 使用大珩助手中的素材库功能&#xff0c;将Word中的&#xff0c;或系统中的文本文件、图片、其他word文档、pdf&#xff0c;所有见到的好素材&#xff0c;一键收纳。 步骤&#xff1a;选中文件&#xff0c;按住鼠标左键拖到素材库界面中&…...

qt 正则表达式简单介绍

正则表达式即一个文本匹配字符串的一种模式,Qt中使用QRegExp类进行模式匹配.主要应用:字符串验证,搜索,替换,分割..... 正则表达式中字符及字符集 c 匹配字符本身&#xff0c;如a匹配a \c 跟在\后面的字符匹配字符本身&#xff0c;但本表中下面指定的这些字符除外。 \a 匹…...

Redis设计与实现之跳跃表

目录 一、跳跃表 1、跳跃表的实现 2、跳跃表的应用 3、跳跃表的时间复杂度是什么&#xff1f; 二、跳跃表有哪些应用场景&#xff1f; 三、跳跃表和其他数据结构&#xff08;如数组、链表等&#xff09;相比有什么优点和缺点&#xff1f; 四、Redis的跳跃表支持并发操作吗…...

[每周一更]-(第27期):HTTP压测工具之wrk

[补充完善往期内容] wrk是一款简单的HTTP压测工具,托管在Github上,https://github.com/wg/wrkwrk 的一个很好的特性就是能用很少的线程压出很大的并发量. 原因是它使用了一些操作系统特定的高性能 io 机制, 比如 select, epoll, kqueue 等. 其实它是复用了 redis 的 ae 异步事…...

【FunASR】Paraformer语音识别-中文-通用-16k-离线-large-onnx

模型亮点 模型文件: damo/speech_paraformer-large-vad-punc_asr_nat-zh-cn-16k-common-vocab8404-pytorchParaformer-large长音频模型集成VAD、ASR、标点与时间戳功能&#xff0c;可直接对时长为数小时音频进行识别&#xff0c;并输出带标点文字与时间戳&#xff1a; ASR模型…...

C语言中的柔性数组

uint8_t data[0];代码的含义老虎开始对这个数组不太了解&#xff0c;查阅后得知这是个柔性数组。 C语言中的柔性数组&#xff08;Flexible Array Member&#xff09;是一种特殊的数组&#xff0c;它被定义在结构体的最后一个元素中&#xff0c;其大小未知&#xff0c;也就是所…...

ca-certificates.crt解析加载到nssdb中

openssl crl2pkcs7 -nocrl -certfile /etc/ssl/certs/ca-certificates.crt | openssl pkcs7 -print_certs -noout -text ca-certificates.crt为操作系统根证书列表。 获取证书以后使用PK11_ImportDERCert将证书导入到nssdb中 base::FilePath cert_path base::FilePath("…...

聊聊Java中的常用类String

String、StringBuffer、StringBuilder 的区别 从可变性分析 String不可变。StringBuffer、StringBuilder都继承自AbstractStringBuilder &#xff0c;两者的底层的数组value并没有使用private和final修饰&#xff0c;所以是可变的。 AbstractStringBuilder 源码如下所示 ab…...

R语言piecewiseSEM结构方程模型在生态环境领域实践技术

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;可分析系统内变量间的相互关系&#xff0c;并通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、地学、…...

IDEA设置查看JDK源码

问题 我们在查看JDK源码时&#xff0c;可能会遇到这种情况&#xff0c;步入底层查看JDK源码时&#xff0c;出现一堆var变量&#xff0c;可读性非常之差&#xff0c;例如笔者最近想看到nio包下的SocketChannelImpl的write方法&#xff0c;结果看到这样一番景象&#xff1a; pu…...

SSM—Mybatis

目录 和其它持久化层技术对比 搭建MyBatis 开发环境 创建maven工程 创建MyBatis的核心配置文件 创建mapper接口 创建MyBatis的映射文件 通过junit测试功能 加入log4j日志功能 核心配置文件详解 MyBatis的增删改查 新增 删除 修改 查询一个实体类对象 查询list集…...

MYSQL在不删除数据的情况下,重置主键自增id

MYSQL在不删除数据的情况下&#xff0c;重置主键自增id 方法一&#xff1a; SET num : 0; UPDATE table_name SET id num : (num1); ALTER TABLE table_name AUTO_INCREMENT 1; 方法二&#xff1a; 背景(mysql 数据在进行多次删除新增之后id变得很大&#xff0c;但是并没…...

SpringMVC-servlet交互

servlet交互 1.1 引入servlet依赖 <dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>provided</scope></dependency>1.2 创建testservl…...

DICOM 文件中,VR,VL,SQ,图像二进制的几个注意点

DICOM 文件的结构&#xff0c;在网上有很多的学习资料&#xff0c;这里只介绍些容易混淆的概念&#xff0c;作为回看笔记。 1. 传输语法 每个传输语法&#xff0c;起都是表达的三个概念&#xff1a;大小端、显隐式、压缩算法 DICOM Implicit VR Little Endian: 1.2.840.1000…...

git 的使用

git reset详解-CSDN博客 git reset 命令详解 git revert命令详解。-CSDN博客 关于Git分支中HEAD和Master的理解 - 知乎 (zhihu.com) 一文带你精通 Git&#xff08;Git 安装与使用、Git 命令精讲、项目的推送与克隆&#xff09;-CSDN博客 Git 常用操作&#xff08;5&#xff…...

详解—【C++】lambda表达式

目录 前言 一、lambda表达式 二、lambda表达式语法 2.1. lambda表达式各部分说明 2.2. 捕获列表说明 三、函数对象与lambda表达式 前言 在C98中&#xff0c;如果想要对一个数据集合中的元素进行排序&#xff0c;可以使用std::sort方法。 #include <algorithm> #i…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...