微信小程序生成二维码js

 

微信小程序生成二维码js

参考：https://github.com/tomfriwel/weapp-qrcode

最新的二维码工具：https://github.com/KeeeX/qrcodejs

1、通过canvas的id来绘制二维码：

            效果图：（单位是px，所以小程序的rpx要进行转换px）
    
                                              
    二维码计算工具：
    /*********************************************   使用的是canvas的id，绘制在整个canvas上，包括导出图片*********************************************************************** */

      weapp-qrcode.js 下载使用

QRCode = function (canvasId, vOption) {
	this._htOption = {
		width: 256,
		height: 256,
		typeNumber: 4,
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRErrorCorrectLevel.H
	};

	if (typeof vOption === 'string') {
		vOption = {
			text: vOption
		};
	}

	// Overwrites options
	if (vOption) {
		for (var i in vOption) {
			this._htOption[i] = vOption[i];
		}
	}

	this._oQRCode = null;
	this.canvasId = canvasId

	if (this._htOption.text && this.canvasId) {
		this.makeCode(this._htOption.text);
	}
};
//创建二维码code
QRCode.prototype.makeCode = function (sText, callback) {
	this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
	this._oQRCode.addData(sText);
	this._oQRCode.make();
	this.makeImage(callback);
};
//创建二维码图片
QRCode.prototype.makeImage = function (callback) {
	var _oContext
	if (this._htOption.usingIn) {
		_oContext = wx.createCanvasContext(this.canvasId, this._htOption.usingIn)
	}
	else {
		_oContext = wx.createCanvasContext(this.canvasId)
	}
	var _htOption = this._htOption;
	var oQRCode = this._oQRCode

	var nCount = oQRCode.getModuleCount();
	var nWidth = _htOption.width / nCount;
	var nHeight = _htOption.height / nCount;
	var nRoundedWidth = Math.round(nWidth);
	var nRoundedHeight = Math.round(nHeight);

	for (var row = 0; row < nCount; row++) {
		for (var col = 0; col < nCount; col++) {
			var bIsDark = oQRCode.isDark(row, col);
			var nLeft = col * nWidth;
			var nTop = row * nHeight;
			_oContext.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
			// _oContext.setStrokeStyle('yellow')
			_oContext.setLineWidth(1)
			_oContext.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
			// _oContext.setFillStyle('red')
			// if (bIsDark) {
			_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
			// }

			// 안티 앨리어싱 방지 처리
			// if (bIsDark) {
			_oContext.strokeRect(
				Math.floor(nLeft) + 0.5,
				Math.floor(nTop) + 0.5,
				nRoundedWidth,
				nRoundedHeight
			);

			_oContext.strokeRect(
				Math.ceil(nLeft) - 0.5,
				Math.ceil(nTop) - 0.5,
				nRoundedWidth,
				nRoundedHeight
			);
			// }
			// _oContext.fillRect(
			//     Math.floor(nLeft) + 0.5,
			//     Math.floor(nTop) + 0.5,
			//     nRoundedWidth,
			//     nRoundedHeight
			// );
			// _oContext.fillRect(
			//     Math.ceil(nLeft) - 0.5,
			//     Math.ceil(nTop) - 0.5,
			//     nRoundedWidth,
			//     nRoundedHeight
			// );
			// _oContext.clearRect(
			//     Math.floor(nLeft) + 0.5,
			//     Math.floor(nTop) + 0.5,
			//     nRoundedWidth,
			//     nRoundedHeight
			// );
			// _oContext.clearRect(
			//     Math.ceil(nLeft) - 0.5,
			//     Math.ceil(nTop) - 0.5,
			//     nRoundedWidth,
			//     nRoundedHeight
			// );
		}
	}

   //二维码中间的logo（计算位置并绘制）
	if (_htOption.image && _htOption.image != '') {
	  _oContext.drawImage(_htOption.image, 0 + (_htOption.width - _htOption.width / 4) / 2, 0 + (_htOption.height - _htOption.height/4)/2, _htOption.width/4, _htOption.height/4)
	}

	_oContext.draw(false, callback)
};

// 保存为图片，将临时路径传给回调
QRCode.prototype.exportImage = function (callback) {
	if (!callback) {
		return
	}
	wx.canvasToTempFilePath({
		x: 0,
		y: 0,
		width: this._htOption.width,
		height: this._htOption.height,
		destWidth: this._htOption.width,
		destHeight: this._htOption.height,
		canvasId: this.canvasId,
		success: function (res) {
			callback(res.tempFilePath)
		},
		fail:res=>{
			console.log(res)
		}
	})
}

QRCode.CorrectLevel = QRErrorCorrectLevel;

    
    生成二维码：
    

<canvas class='canvas' style="width:{{120}}px; height:{{120}}px;" canvas-id='canvas'></canvas>

.canvas{
  position: absolute;
  top: 200rpx;
  left: 240rpx;
}

var QRCode = require('../../../utils/weapp-qrcode.js')

let that = this;
new QRCode('canvas', {
  // usingIn: this,
  text: "漠天，技术开发，主要涉及android、weex、微信小程序、flutter、java等等",
  image: that.data.userIcon,
  width: 120,
  height: 120,
  colorDark: "#1CA4FC",
  colorLight: "white",
  correctLevel: QRCode.CorrectLevel.H,
});

    
    
2、通过canvas的context来绘制二维码：

    效果图：
    
                                                                
    
    二维码计算工具：
             /*********************************************   使用的是canvas的context对象,绘制在canvas的固定位置*********************************************************************** */

        weapp-qrcode.js 下载使用

 /*********************************************   使用的是canvas的context对象,绘制在canvas的固定位置*********************************************************************** */

// QRCode object（传入canvas的context用来绘制，适用于在 canvas上某一部分绘制，在调用后  自己canvas.draw）
QRCode = function (contextCanvas, vOption) {
this._htOption = {
  width: 256,
  height: 256,
  typeNumber: 4,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRErrorCorrectLevel.H
};

if (typeof vOption === 'string') {
  vOption = {
	text: vOption
  };
}

//   // Overwrites options
if (vOption) {
  for (var i in vOption) {
	this._htOption[i] = vOption[i];
  }
}

this._oQRCode = null;
this.contextCanvas = contextCanvas

if (this._htOption.text && this.contextCanvas) {
  this.makeCodeCanvas(this._htOption.text);
}
};

//创建二维码code
QRCode.prototype.makeCodeCanvas = function (sText, callback) {
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
this._oQRCode.addData(sText);
this._oQRCode.make();
this.makeImageCanvas(callback);
};

//创建二维码图片
QRCode.prototype.makeImageCanvas = function (callback) {
var _htOption = this._htOption;
var oQRCode = this._oQRCode

var nCount = oQRCode.getModuleCount();
var nWidth = _htOption.width / nCount;
var nHeight = _htOption.height / nCount;
var nRoundedWidth = Math.round(nWidth);
var nRoundedHeight = Math.round(nHeight);

for (var row = 0; row < nCount; row++) {
  for (var col = 0; col < nCount; col++) {
	var bIsDark = oQRCode.isDark(row, col);
	var nLeft = _htOption.startX + col * nWidth;
	var nTop = _htOption.startY + row * nHeight;
	this.contextCanvas.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
	// _oContext.setStrokeStyle('yellow')
	this.contextCanvas.setLineWidth(1)
	this.contextCanvas.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
	// _oContext.setFillStyle('red')
	// if (bIsDark) {
	this.contextCanvas.fillRect(nLeft, nTop, nWidth, nHeight);
	// }

	// if (bIsDark) {
	this.contextCanvas.strokeRect(
	  Math.floor(nLeft) + 0.5,
	  Math.floor(nTop) + 0.5,
	  nRoundedWidth,
	  nRoundedHeight
	);

	this.contextCanvas.strokeRect(
	  Math.ceil(nLeft) - 0.5,
	  Math.ceil(nTop) - 0.5,
	  nRoundedWidth,
	  nRoundedHeight
	);
  }
  // _oContext.fillRect(
  //     Math.floor(nLeft) + 0.5,
  //     Math.floor(nTop) + 0.5,
  //     nRoundedWidth,
  //     nRoundedHeight
  // );
  // _oContext.fillRect(
  //     Math.ceil(nLeft) - 0.5,
  //     Math.ceil(nTop) - 0.5,
  //     nRoundedWidth,
  //     nRoundedHeight
  // );
  // _oContext.clearRect(
  //     Math.floor(nLeft) + 0.5,
  //     Math.floor(nTop) + 0.5,
  //     nRoundedWidth,
  //     nRoundedHeight
  // );
  // _oContext.clearRect(
  //     Math.ceil(nLeft) - 0.5,
  //     Math.ceil(nTop) - 0.5,
  //     nRoundedWidth,
  //     nRoundedHeight
  // );
  //   }
}

//二维码中间的logo（计算位置并绘制）
if (_htOption.image && _htOption.image != '') {
  this.contextCanvas.drawImage(_htOption.image, _htOption.startX + (_htOption.width - _htOption.width / 4) / 2, _htOption.startY + (_htOption.height - _htOption.height / 4) / 2, _htOption.width / 4, _htOption.height / 4)
}

};

QRCode.CorrectLevel = QRErrorCorrectLevel;

    
    生成二维码：
    

 <canvas style="margin-top:30rpx;width:{{windowWidth/10*9}}px;height:{{windowHeight/10*9}}px;  image-rendering: pixelated" canvas-id="qrResultCanvas" bindlongtap="saveCanvasImage"></canvas>

var QRCode = require('../../../utils/weapp-qrcode.js')

  /**
   * 页面的初始数据
   */
  data: {
	userIcon:'',//用户头像
	windowWidth: '',//屏幕的宽度
	windowHeight: '',//屏幕的高度
  },
  
  
	/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	let that = this;
	//获取微信系统信息
	wx.getSystemInfo({
	  success: function (systemInfo) {
		that.setData({
		  windowWidth: systemInfo.windowWidth,
		  windowHeight: systemInfo.windowHeight,
		})
	  }
	})
  }

// 使用 wx.createContext 获取绘图上下文 context
const context = wx.createCanvasContext('qrResultCanvas')

new QRCode(context, {
  // usingIn: this,
  text: "漠天，技术开发，主要涉及android、weex、微信小程序、flutter、java等等",
  image: that.data.userIcon,
  width: 90,
  height: 90,
  startX: that.data.windowWidth / 10 * 6-30 ,
  startY: that.data.windowHeight / 10 * 7-20,
  colorDark: "#1CA4FC",
  colorLight: "white",
  correctLevel: QRCode.CorrectLevel.H,
});

context.draw()

 

weapp-qrcode.js 下载使用