uniapp使用canvas画海报二维码

目录

给定画布大小《在template内》

先引入js：js复制最下面的代码即可，用你的方法引入即可！

绘图：

导出海报：给一个按钮绑定事件，canvasToTempFilePath，通过uni.canvasToTempFilePath导出海报到本地。

canvasToTempFilePath的参数如下：

绘制二维码前往微信公众平台配置教程：

进入微信公众平台：打开开发管理

 选择开发设置：

 找到扫描普通二维码

 添加配置：

weapp-qrcode.js代码位置：

---

给定画布大小《在template内》

简单来说就是<canvas canvas-id=“”>组成

<canvas canvas-id="myQrcode" style=" width: 178px;height: 178px;position: absolute;top: -1000rpx;" />
<canvas canvas-id="myCanvas" style="height:1334px;width:750px;position:absolute;top: -9000rpx;"></canvas>

先引入js：js复制最下面的代码即可，用你的方法引入即可！

import QRCode from './weapp-qrcode.js';

绘图：

在onloder或者获取列表成功后调用即可。自己想清楚什么时候执行绘图比较好自己看着办。这边的myQrcode，就是对应楼上的那个canvas标签中的canvas-id,对于你扫码不执行callback回调，你先把图片保存在本地，通过微信小程序工具，上传二维码解析，就可以在控制台看见他的回调了。

画布的drawImage参数详情可以看这个大哥的文章，贼容易懂。这里：http://t.csdn.cn/5q0f5

	// 绘制二维码和海报
			qrCodeImg(id) {
				const code = new QRCode('myQrcode', {
                    //text为生成二维码的地址，需要在微信公众平台=》开发管理=》开发设置=》普通二维码扫码设置。很简单。
					text: `http：//www.baidu.com?scene=share&&id=${id}`,
					width: 178,//绘制的宽
					height: 178,//绘制的高
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.H,
					callback: res => {//这边是绘图完成的回调
						const qrcodeurl = res.path // 二维码的地址
						uni.downloadFile({//下载网络图。如果是本地的，就省略这一步，直接把图给绘制海报的canvas-id为myCanvas的绘图事件
							// 库里读取的背景图片
							url: this.$store.getters.Setting.XXXXXXXX +
								'/medias/images/upload/bg.png',
							success: bgTempFileRes => {
								getURL(bgTempFileRes.tempFilePath, qrcodeurl)
							},
							fail: err => {
								getURL('../../static/images/haib.png', qrcodeurl)
							}
						})

					}
				})
                  //这边开始绘画海报，把生成的二维码图片给drawImage标签去绘制海报
				const getURL = (bgUrl, qrcodeurl) => {
					console.log('==bgUrl', bgUrl)
					uni.downloadFile({//这边是下载网络图，没有可以删掉直接跳到创建canvas开始绘画
						url: this.record.coverUrl, // 封面图片
						success: qrcodeTempFileRes => {

							//创建canvas
							const ctx = uni.createCanvasContext('myCanvas')
							//绘制
							ctx.drawImage(bgUrl, 0, 0, 750, 1334);参数分为传3个，传5个，传9个。
							ctx.drawImage(qrcodeTempFileRes.tempFilePath, 126.13, 555.72, 495, 318.22);如果传5个那么就是，（需要绘制的图片，x从画报X坐标开始绘制，y从画报y坐标开始绘制，width绘制宽度，height绘制高度）
							// ctx.font = '11 PingFang SC'//字体大小
							ctx.setFillStyle('#222');
							ctx.setTextAlign('left');//字体靠什么开始延伸
							ctx.font = '22 bold 22px Arial,sans-serif '
							ctx.fillText(decodeURI(this.record.teamName), 101.13, 536, 120, 100);
							// 标题
							ctx.setFillStyle('#222');
							ctx.setTextAlign('right');
							ctx.font = '22 bold 22px Arial,sans-serif '
							ctx.fillText(`编号:${this.record.bm}`, 627, 536, 100, 100);
							// 标题
							ctx.setFontSize(30);
							ctx.setFillStyle('#000');
							ctx.setTextAlign('center');//字体从中间开始绘制
							ctx.fillText((decodeURI(this.record.content)), 370, 920, 100, 100);
							ctx.setStrokeStyle('#222')
							ctx.drawImage(qrcodeurl, 285.75, 1032.88)
                            //结束绘画
							ctx.draw()
						}
					})
				}
			},

导出海报：给一个按钮绑定事件，canvasToTempFilePath，通过uni.canvasToTempFilePath导出海报到本地。

	canvasToTempFilePath() {
                //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					fileType: 'jpg',
					destWidth: 750,
					destHeight: 1334,
					success: (res) => {
						// 在H5平台下，tempFilePath 为 base64
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath
						})
					}
				})
			},

canvasToTempFilePath的参数如下：

绘制二维码前往微信公众平台配置教程：

进入微信公众平台：打开开发管理

 选择开发设置：

 找到扫描普通二维码

 添加配置：

这边的小程序功能页面，就是你要跳转的地址，二维码校验规则就是放在绘制二维码里的text里。通过二维码校验规则的路径，扫码后会直接跳到你配置的页面上。只要符合规则，你的二维码校验路径你可以随便写。如果需要传递参数。那么就在校验规则路径上加上？id=后面就是你要传递的参数，比如http.www.baidu.com?id=这样子，在绘制二维码text值上后面就加上`http：//www.baidu.com?scene=share&&id=${id}`,?号后面就是你要传递的参数值了。

weapp-qrcode.js代码位置：

// Core code comes from https://github.com/davidshimjs/qrcodejs

var QRCode;



(function () {

    /**

         * Get the type by string length

         * 

         * @private

         * @param {String} sText

         * @param {Number} nCorrectLevel

         * @return {Number} type

         */

    function _getTypeNumber(sText, nCorrectLevel) {

        var nType = 1;

        var length = _getUTF8Length(sText);



        for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {

            var nLimit = 0;



            switch (nCorrectLevel) {

                case QRErrorCorrectLevel.L:

                    nLimit = QRCodeLimitLength[i][0];

                    break;

                case QRErrorCorrectLevel.M:

                    nLimit = QRCodeLimitLength[i][1];

                    break;

                case QRErrorCorrectLevel.Q:

                    nLimit = QRCodeLimitLength[i][2];

                    break;

                case QRErrorCorrectLevel.H:

                    nLimit = QRCodeLimitLength[i][3];

                    break;

            }



            if (length <= nLimit) {

                break;

            } else {

                nType++;

            }

        }



        if (nType > QRCodeLimitLength.length) {

            throw new Error("Too long data");

        }



        return nType;

    }



    function _getUTF8Length(sText) {

        var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');

        return replacedText.length + (replacedText.length != sText ? 3 : 0);

    }



    function QR8bitByte(data) {

        this.mode = QRMode.MODE_8BIT_BYTE;

        this.data = data;

        this.parsedData = [];



        // Added to support UTF-8 Characters

        for (var i = 0, l = this.data.length; i < l; i++) {

            var byteArray = [];

            var code = this.data.charCodeAt(i);



            if (code > 0x10000) {

                byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);

                byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);

                byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);

                byteArray[3] = 0x80 | (code & 0x3F);

            } else if (code > 0x800) {

                byteArray[0] = 0xE