关于uniapp生成一维码图片
步骤
- 生成一维码的base64字符串
- 将base64转为图片
- 绘制图片
实现
生成一维码的base64字符串
js
复制代码
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转为图片
js
复制代码
/**
* 将base64转为图片
* @param {string} code
* @returns {Promise<string>}
*/
function base64ToImage(code) {
return new Promise((resolve, reject) => {
// 原生html5+api
const 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绘制生成的图片
js
复制代码
/**
* 绘制标签
* @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. 渲染并在回调中导出为 base64
ctx.draw(false, () => {
// 一定要在 draw 回调中调用 canvasToTempFilePath
uni.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
)
})
})
}