微信小程序canvas 生成二维码图片,画图片,生成图片,将两个canvas结合并保存图片

**需求实现步骤如下

  1. 先定义两个canvas
  2. 一个canvas myQrcode画二维码的图片
  3. 另一个canvas mycanvas画一个背景图,并把二维码画到这个canvas上,mycanvas这个canvas生成一张图片,返回图片的临时路径
  4. 最后保存图片到手机**

首先wxml,新版微信小程序canvas要注意写 type=“2d” id=“XXX”

<canvas type="2d" style="width: 750rpx;height: 1260rpx;position:fixed;top: 1000px;left: 0px;z-index: 9999999999;" id="mycanvas"></canvas>
<canvas type="2d" style="width: 200rpx;height: 200rpx;position:fixed;top: 1000px;left: 0px;z-index: 9999999999;" id="myQrcode"></canvas>

画图

在这里插入图片描述

安装weapp-qrcode-canvas-2d

npm install weapp-qrcode-canvas-2d --save

weapp-qrcode-canvas-2d github
inviteBg是返回的微信临时图片地址

import {loadImg
} from '../../utils/drawPoster'
Page({onLoad(){const ewmLink = getApp().api.requestBase + '/index?user_id=' + userInfo.userId;const img = 'https://jingdong-sauce.oss-cn-beijing.aliyuncs.com/images/b49632186701d80f507a0b0930a34435.jpg'loadImg('#mycanvas', '#myQrcode', ewmLink, img, this, (base64) => {console.log(base64)this.setData({inviteBg: base64,saveImgShow: true})})}
})

先通过wx.createSelectorQuery(),查询到两个canvas
然后画二维码图片drawCode,并生成二维码临时图片canvasToTempFilePath
canvas1.createImage() ctx.drawImage(img, 0, 0, canvas1.width / 3, canvas1.height / 3); 将背景图片画到canvas1上
canvas1.createImage() ctx.drawImage(img2, canvas1.width / 6 - 70, 340, 140, 140) 将二维码图片画到canvas1上
wx.canvasToTempFilePath 生成canvas1背景图和二维码图片结合的临时图片并返回
drawPoster.js

import drawQrcode from 'weapp-qrcode-canvas-2d'
// 假设你已经引入了 qrcode.js
export function loadImg(canvasId1, canvasId2, ewmLink, imgUrl, context, callback) {const query = wx.createSelectorQuery()query.select(canvasId1).fields({node: true,size: true})query.select(canvasId2).fields({node: true,size: true})query.exec(async (res) => {console.log(res)const canvas1 = res[0].nodeconst canvas2 = res[1].node// 调用方法drawQrcode生成二维码let img2Src = await drawCode(canvas2, canvasId2, ewmLink)console.log('img2Src', img2Src)const ctx = canvas1.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas1.width = res[0].width * dprcanvas1.height = res[0].height * dprctx.scale(dpr, dpr)const img = canvas1.createImage()img.src = imgUrlimg.onload = () => {ctx.drawImage(img, 0, 0, canvas1.width / 3, canvas1.height / 3);console.log(ctx)const img2 = canvas1.createImage()img2.src = img2Srcimg2.onload = () => {ctx.drawImage(img2, canvas1.width / 6 - 70, 340, 140, 140)wx.canvasToTempFilePath({canvasId: canvasId1,canvas: canvas1,x: 0,y: 0,width: 414,height: 695,destWidth: 414,destHeight: 695,success(res) {console.log('合成图片路径', res.tempFilePath)callback(res.tempFilePath)},fail(res) {console.error(res)}})}}})}function drawCode(canvas, canvasId, ewmLink) {return new Promise(async (resolve, reject) => {await drawQrcode({canvas: canvas,canvasId: canvasId,width: 200,padding: 30,background: '#ffffff',foreground: '#000000',text: ewmLink,})wx.canvasToTempFilePath({canvasId: canvasId,canvas: canvas,x: 0,y: 0,width: 260,height: 260,destWidth: 260,destHeight: 260,success(res) {resolve(res.tempFilePath)console.log('二维码临时路径:', res.tempFilePath)},fail(res) {console.error(res)}})})}

保存图片

在这里插入图片描述
点击保存图片,至此就能把这个图片保存到手机里啦

    const query = wx.createSelectorQuery()query.select('#mycanvas').fields({node: true,size: true}).exec(res => {wx.canvasToTempFilePath({canvas: res[0].node,success: function (res) {console.log("uuuu22222")wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {console.log("33333")wx.showToast({title: '保存成功',})}})},fail: function (res) {console.log("444444")console.log(res);}}, _this);})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Javaee】网络原理—TCP协议的核心机制

前言 TCP/IP五层协议是互联网中的主流模型&#xff0c;为网络通信提供了一个稳固的框架。 主要包含了应用层&#xff0c;传输层&#xff0c;网络层&#xff0c;数据链路层&#xff0c;物理层。 本篇主要介绍传输层的TCP协议的核心机制 一. 确认应答&#xff08;ack&#xf…

JMeter压测时报错Address Already in use 或 java.net.SocketException: Socket closed

由于模拟并发请求会占用一个端口&#xff0c;和远程来建立连接&#xff0c;但是windows本身提供的端口访问机制受到限制&#xff0c;在Windows操作系统中&#xff0c;端口号的使用受到一定的管理和限制。端口号1024到5000&#xff08;或有时称为“动态端口”或“私有端口”范围…

使用 pydub 的 AudioSegment 获取音频时长 - python 实现

通过使用 pydub 的 AudioSegment 获取音频时长&#xff0c;音频常用格式如 m4a,wav等。 安装 python 库&#xff1a; pip install pydub 获取 m4a 格式的音频时长代码如下&#xff0c;代码如下&#xff1a; #-*-coding:utf-8-*- # date:2024-10 # Author: DataBall - XIAN #…

2024软考网络工程师笔记 - 第10章.组网技术

文章目录 交换机基础1️⃣交换机分类2️⃣其他分类方式3️⃣级联和堆叠4️⃣堆叠优劣势5️⃣交换机性能参数 &#x1f551;路由器基础1️⃣路由器接口2️⃣交换机路由器管理方式2️⃣交换机路由器管理方式 交换机基础 1️⃣交换机分类 1.根据交换方式分 存储转发式交换(Store…

Java生死簿管理小系统(简单实现)

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

精益生产现场管理和改善的实施技巧有哪些?

精益生产现场管理和改善&#xff0c;是企业追求高效、高质量生产的关键所在。这一管理策略强调在现场通过一系列工具和方法&#xff0c;对生产流程、物料流动、设备利用、人员配置等进行持续优化&#xff0c;旨在消除浪费、提升效率、保障质量、增强灵活性&#xff0c;最终实现…

npm、yarn、pnpm的workspaces使用

示例项目中总会遇到npm的packages中出现的workspaces键值对&#xff0c;自己的项目中没接触过这个东西&#xff0c;到底是什么&#xff1f;怎么用的&#xff1f;简单研究记录一下&#xff1a; abbrev是一个npm包&#xff0c;提供缩写展开功能。‌ 当你定义一个缩写后&#xff0…

PoissonRecon学习笔记

1. Screened Poisson Reconstruction (SPR) 源码&#xff1a;https://github.com/mkazhdan/PoissonRecon However, as noted by several researchers, it suffers from a tendency to over-smooth the data. 泊松重建存在过度平滑的现象。 方法&#xff1a;position and gradi…

Python:背景知识及环境安装

一、计算机的基础概念 1.1 什么是计算机&#xff1f; 最早我们有计算器&#xff0c;但是他只能完成算数运算的功能 而计算机能完成的工作有&#xff1a; &#xff08;1&#xff09;算术运算 &#xff08;2&#xff09;逻辑判断 &#xff08;3&#xff09;数据存储 &#xff08…

VUE中文本域默认展示最底部内容

文本域内容 <textarea ref"textareaRef" style"width: 100%; resize: none;" readonly v-model"errorLog" rows"15"></textarea> 样式展示 this.$nextTick(() > { // 使用$refs获取文本域的DOM元素 const textareaInfo…

重生之“我打数据结构,真的假的?”--3.栈和队列(无习题)

栈和队列 C语言中的栈和队列总结 在C语言中&#xff0c;**栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;**是两种非常重要的数据结构。它们广泛用于各种应用中&#xff0c;比如内存管理、任务调度、表达式求值等。本文将对这两种数据结构进行详细的介…

智能汽车制造:海康NVR管理平台/工具EasyNVR多品牌NVR管理工具/设备实现无插件视频监控直播方案

一、背景介绍 近年来&#xff0c;随着网络在我国的普及和深化发展&#xff0c;企业的信息化建设不断深入&#xff0c;各行各业都加快了信息网络平台的建设&#xff0c;大多数单位已经或者正在铺设企业内部的计算机局域网。与此同时&#xff0c;网络也成为先进的新兴应用提供了…

详细尝鲜flutter

flutter 161由于官方的汉化文档感觉还是有很多没有汉化的地方 &#xff0c;所以自己打一遍的同时写下了以下笔记 社区生态 官方文档 所有的控件:Widget 目录 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 官方论坛的教程 Flutter Widget框架概述 - Flutter中文网…

7款视频转换器大测评!哪款是最适合你的视频格式转换器?

视频已成为我们生活中不可或缺的一部分&#xff0c;但不同的设备、平台和软件往往支持不同的视频格式&#xff0c;这给我们的视频分享、编辑和播放带来了不少困扰。因此&#xff0c;一款高效、易用的视频格式转换器成为了许多人的必备工具。本文将从软件界面、功能特性、难易程…

不推荐使用Scilab作为MATLAB的开源替代

安装了Scilab2024.1.0&#xff0c;随便试了几分钟就发现有严重影响使用的Bug(也可能是就是这样设计的&#xff0c;有一个所谓的“暂停模式”)&#xff0c;复现步骤&#xff1a;主界面上点击“Scilab示例”按钮&#xff0c;打开“演示”窗口&#xff0c;点击左侧列表中的“多项式…

JSON Web Token (JWT)的简单介绍、验证过程及令牌刷新思路

目录 一、JWT 1、什么是Jwt 2、为什么要使用Jwt 3、应用场景 4.Jwt的组成 4.1、Header 4.2、Payload 4.3、signature 二、Jwt验证过程 1、生成Jwt令牌 2、解析旧的Jwt 3、复制Jwt 4、Jwt有效时间测试 三、Jwt令牌刷新思路 1、配置JwtFilter过滤器 2、登录生成Jwt令…

R语言机器学习遥感数据处理与模型空间预测技术及实际项目案例分析

随机森林作为一种集成学习方法&#xff0c;在处理复杂数据分析任务中特别是遥感数据分析中表现出色。通过构建大量的决策树并引入随机性&#xff0c;随机森林在降低模型方差和过拟合风险方面具有显著优势。在训练过程中&#xff0c;使用Bootstrap抽样生成不同的训练集&#xff…

【案例75】全表扫描导致系统崩溃

问题现象 顾问反馈系统审批单据时&#xff0c;系统出现整体卡顿。操作审批单据本身比较长&#xff0c;在数据库中出现了死锁&#xff0c;死锁处理后&#xff0c;一审批单据就又会整体卡顿。 问题分析 开始怀疑有事务锁未释放导致的&#xff0c;先排查数据库当时的状态。发现…

AI写PPT工具:四款人工智能软件全面解析!!

嘿&#xff0c;小伙伴们&#xff01;今天咱们来聊聊那些能帮我们搞定PPT的神器——四款人工智能软件。有了它们&#xff0c;咱们再也不用为做PPT而头疼啦&#xff01; 第一款&#xff1a;笔灵AIPPT 直通车&#xff08;粘贴复制到网站打开&#xff09;&#xff1a;ibiling.c…

C++第八讲:STL--stack和queue的使用及模拟实现

C第八讲&#xff1a;STL--stack和queue的使用及模拟实现 1.stack的使用2.queue的使用3.栈和队列OJ题3.1题目1&#xff1a;最小栈3.2题目2&#xff1a;栈的压入、弹出序列3.3题目3&#xff1a;逆波兰表达式求值3.4题目4&#xff1a;用栈实现队列 4.栈的模拟实现5.队列的模拟实现…