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
                )
            })
        })
    }
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端