uniapp三步完成一维码的生成

关于uniapp生成一维码图片

步骤

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

实现

生成一维码的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
                )
            })
        })
    }
相关推荐
coder_pig21 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少27 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder29 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix40 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句40 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易40 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端