微信小程序前端生成二維碼

 下載qrcode.js文件,下載地址:https://download.csdn.net/download/robin_sky/11829464

/**
	 * 繪製二維碼圖片
	 */
	createQrCode: function(url, canvasId, cavW, cavH) {
		var _this = this
		//調用插件中的draw方法,繪製二維碼圖片
		var qrcode = QR.api.draw(url, canvasId, cavW, cavH);
		console.log(qrcode)
		setTimeout(() => {
			_this.canvasToTempImage();
		}, 1000);
	},
	//適配不同屏幕大小的canvas
	setCanvasSize: function() {
		var size = {};
		try {
			var res = wx.getSystemInfoSync();
			//不同屏幕下canvas的適配比例;設計稿是750寬  686是因爲樣式wxss文件中設置的大小
			var scale = 750 / 686;
			var width = res.windowWidth / scale;
			var height = width; //canvas畫布爲正方形
			size.w = width;
			size.h = height;
		} catch (e) {
			// Do something when catch error
			console.log("獲取設備信息失敗" + e);
		}
		return size;
	},
	/**
	 * 獲取臨時緩存照片路徑,存入data中
	 */
	canvasToTempImage: function() {
		var that = this;
		//把當前畫布指定區域的內容導出生成指定大小的圖片,並返回文件路徑。
		wx.canvasToTempFilePath({
			canvasId: 'mycanvas',
			success: function(res) {
				var tempFilePath = res.tempFilePath;
				console.log(tempFilePath);
				that.setData({
					qrcode: tempFilePath,
					// canvasHidden:true
				});
			},
			fail: function(res) {
				console.log('fail');
			}
		});
	},

然後再指定畫布中顯示即可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章