当前位置: 首页 > 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…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...