uniapp三步完成生成一维码图片

关于uniapp生成一维码图片

步骤

1. 生成一维码的base64字符串
2. 将base64转为图片
3. 绘制图片

实现

生成一维码的base64字符串

const bwipjs = require('@bwip-js/node')
/*** 生成一维码的base64字符串* @param {string} data 一维码的数据* @returns {Promise<string>} base64*/
export const generateBase64 = async (data = '1234567890') => {const png = await bwipjs.toBuffer({bcid: 'code128',text: data,scale: 3,height: 10,width: 70,includetext: true})return `data:image/png;base64,${png.toString('base64')}`
}

将base64转为图片

/*** 将base64转为图片* @param {string} code* @returns {Promise<string>}*/function base64ToImage(code) {return new Promise((resolve, reject) => {// 原生html5+apiconst bitmap = new plus.nativeObj.Bitmap('tempBitmap')// 加载 base64 数据bitmap.loadBase64Data(code,function () {// 将生成的临时图片保存起来bitmap.save('_www/bimap/temp.png',{},(result) => {resolve(result.target)bitmap.clear()},reject)},reject)})},

使用canvas绘制生成的图片

/*** 绘制标签* @param {string} imgPath 条形码base64* @param {object} data 商品信息*/handleDraw() {return new Promise((resolve, reject) => {// 生成canvas上下文const ctx = uni.createCanvasContext(this.canvasPrintId, this)this.drawImage(ctx, this.printStyle)// 2. 渲染并在回调中导出为 base64ctx.draw(false, () => {// 一定要在 draw 回调中调用 canvasToTempFilePathuni.canvasToTempFilePath({canvasId: this.canvasPrintId,success: (res) => {// 将画好的图片转为base64字符串plus.io.resolveLocalFileSystemURL(res.tempFilePath,(entry) => {entry.file((file) => {const reader = new plus.io.FileReader()reader.onloadend = (e) => {resolve(e.target.result) // 返回 base64: data:image/png;base64,...}reader.readAsDataURL(file) // 读取为 base64}, reject)},reject)},fail: reject},this)})})}