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
                )
            })
        })
    }
相关推荐
533_12 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
KIKIiiiiiiii12 小时前
微信个人号开发中如何高效实现API二次开发
java·前端·python·微信
日月之行_12 小时前
Vite+:企业级前端构建的新选择
前端
山顶听风12 小时前
Flask应用改用Waitress运行
前端·笔记·python·flask
Tom Ma.12 小时前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
麦麦大数据12 小时前
F031 Vue+Flask深度学习+机器学习多功能识别系统
vue.js·深度学习·flask
Hilaku13 小时前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试
Knight_AL13 小时前
大文件分片上传:简单案例(前端切割与后端合并)
前端·状态模式
雨过天晴而后无语13 小时前
HTML纯JS添加删除行示例一
前端·javascript·html
IT_陈寒13 小时前
Vue3性能翻倍秘籍:5个被低估的Composition API技巧让你开发效率飙升🚀
前端·人工智能·后端