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

首先在写这个二维码分享海报的时候试过很多方法，比如：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 * dpr
                        textCanvas.height = res[0].height * dpr
                        textCtx.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);
            },
        });