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

首先在写这个二维码分享海报的时候试过很多方法，比如：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);},});