微信小程序实现二维码海报保存分享功能

首先在写这个二维码分享海报的时候试过很多方法,比如:canvas中的这个createCanvasContext创建上下文的方法,去网上一搜就是一大堆,但其实这个方法已经被废弃了。Canvas 实例,可通过 SelectorQuery 获取。这是绘制背景图的时候用到的这个方法,下面首先看我的二维码是如何实现的。

二维码的话我是使用qrcode库来绘制的,首先需要下载一个weapp.qrcode.esm文件,然后在我需要绘制二维码页面的js中引入。

绘制二维码也可以去参考一下这位博主写的博客下载引入的文件:

微信小程序二维码快速生成库:weapp-qrcode 使用指南及问题解决方案-CSDN博客

import QRCode from '../weapp.qrcode.esm';

然后引入进去之后先写我们的wxml,绘制二维码的canvas需要设置canvas-id,这个不能相同

<!--pages/qrcode/index.wxml-->
<view><!-- 顶部导航栏样式 --><view class="top"><view class="round" bind:tap="targetHouse"><image src="http://lzh.yzwdblzs.xyz/img/houseThree.png" alt="" /></view></view><view class="big" bindlongpress="saveQrcode"><!-- 二维码 --><view style="margin-left: -700px;position: absolute;"><canvas canvas-id="myQrcode" style="width: 200px; height: 200px;background-color: azure;"></canvas></view><!-- 绘制的背景图 --><canvas type="2d" id="newQrcode" style="width: 350px;height: 700px;margin-top: 100px;"></canvas><!-- 背景图上的二维码 --><canvas canvas-id="newsQrcode" style="position: absolute;z-index: 3;"></canvas></view>
</view>

在onReady里初始化二维码,是因为在我们刚打开页面的时候二维码就已经可以绘制出来

// 初始化二维码
QRCode({width: 200,height: 200,canvasId: 'myQrcode',colorDark: '#000000',colorLight: '#ffffff',text: 'https://github.com/yingye',//二维码绘制的具体内容
})

绘制成功后将生成文件的tempFilePath具体路径(本地路径)

// 保存二维码为临时路径wx.canvasToTempFilePath({canvasId: 'myQrcode',success(res) {console.log('二维码路径:', res);const tempQrcodePath = res.tempFilePath;console.log(tempQrcodePath);wx.createSelectorQuery().select('#newQrcode').fields({node: true,size: true}).exec((res) => {textCanvas = res[0].node; // 获取 canvas 节点let textCtx = textCanvas.getContext('2d'); // 重点2/**至此,textCanvas,textCtx已经成功获取到,下面代码为绘图测试代码可根据自己需要修改**/const dpr = wx.getSystemInfoSync().pixelRatio; // 获取设备像素比console.log(dpr);textCanvas.width = res[0].width * dprtextCanvas.height = res[0].height * dprtextCtx.scale(1, 1)textCtx.fillRect(0, 0, 100, 100)textCtx.clearRect(0, 0, textCanvas.width, textCanvas.height)textCtx.beginPath();const bg = textCanvas.createImage();bg.src = 'http://lzh.yzwdblzs.xyz/img/noName.png';console.log(bg);bg.onload = () => {console.log('背景图加载成功');// 图片加载完成后,绘制背景图// 如果背景图过大,按比例缩放绘制const bgWidth = bg.width;const bgHeight = bg.height;// 计算缩放比例const scaleX = textCanvas.width / bgWidth;const scaleY = textCanvas.height / bgHeight;const scale = Math.max(scaleX, scaleY); // 选择最大的比例以适应 canvas// 计算背景图绘制的尺寸const drawWidth = bgWidth * scale;const drawHeight = bgHeight * scale;// 绘制背景图textCtx.drawImage(bg, 0, 0, drawWidth, drawHeight);// 然后再绘制二维码// 加载二维码图像const qrImage = textCanvas.createImage();qrImage.src = tempQrcodePath; // 使用临时路径qrImage.onload = () => {console.log('二维码加载成功');// 设置二维码绘制位置(居中)const qrWidth = 560; // 二维码宽度const qrHeight = 600; // 二维码高度const qrX = (textCanvas.width - qrWidth + 30) / 2; // 水平居中const qrY = (textCanvas.height - qrHeight + 750) / 2; // 垂直居中// 绘制二维码到背景图上textCtx.drawImage(qrImage, qrX, qrY, qrWidth, qrHeight);}}})},fail(err) {console.error('获取临时文件失败', err);},});

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

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

相关文章

基于Qlearning强化学习的机器人路线规划matlab仿真

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 训练过程 测试结果 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论…

9 RCC使用HSE、HSI配置时钟

一、时钟树 RCC&#xff1a;reset clock control,复位和时钟控制器。HSE是外部的高速时钟信号&#xff0c;可以由有源晶振或者无源晶振提供。如果使用HSE或者HSE经过PLL倍频之后的时钟作为系统时钟SYSCLK&#xff0c;当HSE故障时候&#xff0c;不仅HSE会被关闭&#xff0c;PLL…

认识数据结构之——排序

一、 插入排序&#xff1a; 直接插入排序(以排升序为例)&#xff1a; 排序思想&#xff1a; 单趟&#xff1a;记录某个位置的值&#xff0c;一个一个和前面的值比较&#xff0c;碰到更大的就往后覆盖&#xff0c;碰到更小的或者相等的就结束&#xff0c;最后将记录的值插入到…

uniapp 微信小程序 功能入口

单行单独展示 效果图 html <view class"shopchoose flex jsb ac" click"routerTo(要跳转的页面)"><view class"flex ac"><image src"/static/dyd.png" mode"aspectFit" class"shopchooseimg"&g…

【集合】Java 8 - Stream API 17种常用操作与案例详解

文章目录 Java8 Stream API 17种常用操作与案例详解1. collect()&#xff1a;将流中的元素收集到集合中2. filter()&#xff1a;根据条件过滤流中的元素3. map()&#xff1a;元素映射为另一个值4. forEach()&#xff1a;对流中的元素执行操作5. flatMap()&#xff1a;将流中的元…

加入SFTP 用户------(小白篇 2)

以下是为 SFTP 添加一个新用户&#xff08;例如 newuser&#xff09;的完整步骤&#xff1a; 1.服务器上加入SFTP------(小白篇 1) 2.加入SFTP 用户------(小白篇 2) 3.代码加入SFTP JAVA —&#xff08;小白篇3&#xff09; 4.代码加入SFTP Python —&#xff08;小白篇4…

苍穹外卖-day05redis 缓存的学习

苍穹外卖-day05 课程内容 Redis入门Redis数据类型Redis常用命令在Java中操作Redis店铺营业状态设置 学习目标 了解Redis的作用和安装过程 掌握Redis常用的数据类型 掌握Redis常用命令的使用 能够使用Spring Data Redis相关API操作Redis 能够开发店铺营业状态功能代码 功能实…

Linux之系统管理

一、相关命令 筛选 grep&#xff0c;可以用来进行筛选&#xff0c;例如对目录筛选课写成 # 过滤出带serv的 ls /usr/sbin | grep serv2. 对服务的操作 2.1 centos6版本 service 服务名 start|stop|restart|status # start&#xff1a;开启 # stop&#xff1a;停止 # restart…

什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap

在刚刚过去的 FlutterInProduction 活动里&#xff0c;Flutter 官方除了介绍「历史进程」和「用户案例」之外&#xff0c;也着重提及了未来相关的 roadmap &#xff0c;其中就有 3.27 里的 Swift Package Manager 、 Widget 实时预览 和 Dart 与 native 平台原生语言直接互操作…

vue.js滑动到顶便锁定位置

<template><div><div class"nav"></div><div class"searchBar" id"searchBar"><ul :class"searchBarFixed true ? isFixed :"> <li>区域<i class"iconfont icon-jiantouxia"…

Numpy基本操作

目录 1、生成数组的方法 1.1、生成0和1的数组 1.2、从现有数组生成 1.2.1、生成方式 1.3、生成固定范围的数组 1.4、生成随机数组 1.4.1、使用模块介绍 1.4.2、均匀分布 1.4.3、正态分布 1.4.4、正态分布创建方式 1、生成数组的方法 1.1、生成0和1的数组 import numpy…

Unity录屏插件-使用Recorder录制视频

目录 1.Recorder的下载 2.Recorder面板 2.1常规录制属性 2.2录制器配置 2.2.1添加录制器 2.2.2配置Input属性 2.2.3配置 Output Format 属性 2.2.4配置 Output File 属性 3.Recorder的使用 3.1录制Game View视频 3.1.1Recorder配置与场景搭建 3.1.2开始录制 3.1.3…

Android Vendor Overlay机制

背景介绍&#xff1a; 看Android 15版本更新时&#xff0c;"Android 15 deprecates vendor overlay"。 猜想这个vendor overlay是之前用过的settings overlay&#xff0c; 不过具体是怎么回事呢&#xff1f; 目录 Vendor Overlay介绍 Vendor Overlay工作原理 Ven…

Python 绘图魔法:用turtle库开启你的编程艺术之旅

&#x1f3e0;大家好&#xff0c;我是Yui_&#xff0c;目标成为全栈工程师~&#x1f4ac; &#x1f351;如果文章知识点有错误的地方&#xff0c;请指正&#xff01;和大家一起学习&#xff0c;一起进步&#x1f440; &#x1f680;如有不懂&#xff0c;可以随时向我提问&#…

AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python

支持向量机是AI开发中最常见的一种算法。之前我们已经一起初步了解了它的概念和应用&#xff0c;今天我们用它来进行一次文本情感分析训练。 一、概念温习 支持向量机&#xff08;SVM&#xff09;是一种监督学习算法&#xff0c;广泛用于分类和回归问题。 它的核心思想是通过…

.net core在linux导出excel,System.Drawing.Common is not supported on this platform

使用框架 .NET7 导出组件 Aspose.Cells for .NET 5.3.1 asp.net core mvc 如果使用Aspose.Cells导出excel时&#xff0c;报错 &#xff1a; System.Drawing.Common is not supported on this platform 平台特定实现&#xff1a; 对于Windows平台&#xff0c;System.Drawing.C…

【Unity3D】实现可视化链式结构数据(节点数据)

关键词&#xff1a;UnityEditor、可视化节点编辑、Unity编辑器自定义窗口工具 使用Newtonsoft.Json、UnityEditor相关接口实现 主要代码&#xff1a; Handles.DrawBezier(起点&#xff0c;终点&#xff0c;起点切线向量&#xff0c;终点切线向量&#xff0c;颜色&#xff0c;n…

6UCPCI板卡设计方案:8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

基于双TMS320C6678 XC7K420T的6U CPCI Express高速数据处理平台 1、板卡概述 板卡由我公司自主研发&#xff0c;基于6UCPCI架构&#xff0c;处理板包含双片TI DSP TMS320C6678芯片&#xff1b;一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片&#xff1b;六个千兆网口&#xff…

【Go学习】Go context 对HTTP请求的影响

一、起因 Go语言中contex是控制协程行为的利器&#xff0c;既然是利器&#xff0c;那么用得好可以取得非常好的效果&#xff0c;用的不好&#xff0c;反手就可能伤了自己。为能使用好它&#xff0c;就需要了解其特性&#xff0c;以及在各种场景下的用法。最近遇到的一个问题&a…

Python + 深度学习从 0 到 1(01 / 99)

希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持&#xff01; ⭐ 深度学习之前&#xff1a;机器学习简史 什么要了解…