微信小程序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…

Unity烟花demo

示例&#xff1a; Unity烟花demo 按钮控制脚本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class FireworksController : MonoBehaviour {public ParticleSystem fireworksParticle;// Start is called before the first frame u…

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…

加密算法入门:DES S盒输出计算方法

在数据加密标准&#xff08;DES&#xff09;中&#xff0c;S盒&#xff08;Substitution box&#xff09;是其核心的非线性部件之一&#xff0c;用于实现混淆&#xff08;Confusion&#xff09;&#xff0c;这是克劳德香农提出的两个基本操作之一&#xff0c;用以增加密码分析的…

Python学习路线:从新手到专家

引言 Python 是一种高级编程语言&#xff0c;以其简洁清晰的语法而闻名&#xff0c;被广泛应用于Web开发、数据科学、人工智能、自动化脚本等领域。无论你是编程初学者还是有经验的开发者&#xff0c;Python 都是一个值得学习的语言。本文将提供一份详细的Python学习路线图&am…

Python:背景知识及环境安装

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

【Bug】RuntimeError: Engine loop has died

目录 报错前置条件报错内容解决方案 报错前置条件 使用vllm启动qwen2.5-32b-instruct模型后发生的报错 GPU是GeForce RTX 4090 Laptop GPU 系统是Windows 11 运行系统是WSL2-Ubuntu22.04 报错内容 INFO 10-22 22:29:31 engine.py:290] Added request chat-993cbe95e73d4a1db…

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;一款高效、易用的视频格式转换器成为了许多人的必备工具。本文将从软件界面、功能特性、难易程…

网络连接设备的功能与应用概述

目录 一、集线器 二、交换机 三、网桥 四、路由器 五、集线器、交换机、网桥与路由器的比较 备注 一、集线器 定义: 集线器(Hub)是一种物理层设备,它提供多个端口,用于将多个计算机或其他网络设备连接在一起,形成一个局域网(LAN)。 工作原理: 集线器通过广播的…

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

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