微信小程序生成二维码带参海报

微信小程序生成二维码带参海报

没错，就是用 canvas 来实现

---

---

首先声明，微信小程序的官方文档我是看了的，但是我真没看懂???，所以退而求其次，以下代码可能存在很多冗余，请不吝赐教，拜谢。

获取屏幕分辨率比

讲到生成海报，就不得不提分辨率比，因为canvas里设置的值是基于设计稿的，但是这个二维码图片的尺寸及位置是设置不了微信小程序里的自适应单位 rpx 的，所以我们需要先获取屏幕分辨率比。

	/** 获取屏幕比例 */
    _getScreenRatio() {
    	/** 设计稿里的屏幕宽度 */
        const ORI_WIDTH = 375;
        return new Promise(resolve => {
            wx.getSystemInfo({
                success: res => {
                    this.setData({
                        ratio: ORI_WIDTH / res.windowWidth || 1
                    });
                    resolve(null);
                }
                // 因为设置了ratio的默认初始值为1，所以这里不做false回调处理
            });
        });
    },

生成二维码

这里我用到了 weapp-qrcode包 ,因为使用npm包构建有些小问题，原谅偷懒的我直接复制了 文件weapp.qrcode.esm.js。

	import drawQrcode from './weapp.qrcode.esm';
	
Page({
	/** 根据链接生成动态二维码 */
    _getGenerateQR() {
        const QRCodeWidth = 115 / this.data.ratio; // 是canvasQRCode的长宽除以2，即真实二维码图片的长宽除以2
        const QRCodeHeight = 115 / this.data.ratio;
        const CanvasId = 'canvasQRCode'; // 页面二维码canvas容器的ID，必须在页面添加canvas，且设置好长宽
        return new Promise(resolve => {
            drawQrcode({
                width: QRCodeWidth,
                height: QRCodeHeight,
                canvasId: CanvasId,
                text: '要生成二维码的链接，可以在其他地方设置，用this.data.xxx获取',
                callback: e => {
                    // HACK: 安卓机上不准确，生成的二维码无法扫描，加延时解决
                    setTimeout(() => {
						console.log('_getGenerageQR()', 'qrcode: ', e);
						
						// 将canvas保存至临时文件
                        wx.canvasToTempFilePath({
                            canvasId: CanvasId,
                            success: res => {
                                resolve(res.tempFilePath);
                            }
                        });
                    }, 500);
                }
            });
        });
    }
});

获取网络图片并转为本地临时文件

注意这里的网络图片域名必须是【微信公众平台】里面设置了的。

let backgroundImgSrc = 'https://xxx/yyy.png';
	wx.getImageInfo({
		src: backgroundImgSrc,
			success: res => {
				this._drawImage(res.path, qrcodeSrc);  // 绘制合成图片
			},
			fail: err => {
				console.error('_drawImage/wx.getImageInfo()', '获取网络图片失败', err);
			}
	});

绘制背景图片以及二维码

	/**
     * 绘制带二维码的背景图片
     * @param {number} index 背景图片及canvas编号
     * @param {String} backgroundImgPath 背景图片本地地址
     * @param {String} qrcodeSrc 二维码图片本地临时地址
     */
    _drawImage(backgroundImgPath, qrcodeSrc) {
        // 图片尺寸常量
        const backImgWidth = 353.5 / this.data.ratio;
        const backImgHeight = 525 / this.data.ratio;
        const qrcodeX = 117 / this.data.ratio;
        const qrcodeY = 280.5 / this.data.ratio;
        const qrcodeWidth = 115 / this.data.ratio;
        const qrcodeHeight = 115 / this.data.ratio;

        // 准备画布,设置长宽
        let ctx = wx.createCanvasContext('canvasBackground');  // 这个canvas必须是在页面里存在的
        ctx.drawImage(backgroundImgPath, 0, 0, backImgWidth, backImgHeight); // 设置背景图片
        ctx.drawImage(qrcodeSrc, qrcodeX, qrcodeY, qrcodeWidth, qrcodeHeight); // X坐标，Y坐标，二维码长，二维码宽
        ctx.draw(true, () => {
        	// 为了防止canvas资源转换失败，所以将资源转换放在draw的成功回调内执行
            wx.canvasToTempFilePath({
                canvasId: 'canvasBackground',
                success: res => {
                    this.setData({
                        imgSrc: res.tempFilePath
                    });                    
                    wx.hideLoading();  // 隐藏onload内的加载中
                },
                fail: err => {
					console.error(
                        '_drawImage/wx.canvasToTempFilePath()',
                        '获取canvas临时图片地址失败',
                        err
                    );
                }
            });
        });
    }

代码片段

微信小程序代码片段

参考链接

感谢
[1] 微信小程序官方文档 扫普通链接二维码打开小程序
[2] yingye weapp-qrcode