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+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绘制生成的图片

/**
     * 绘制标签
     * @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
                )
            })
        })
    }