h5裏面合成二維碼

自己寫，寫不出來，不過網上有很多插件，我用的是這個qrcodenpm鏈接，好了 直接開始寫的

在vue項目裏面引用的
npm install qrcode --save

<template>
    <div>
        <img :src="src" alt="">
    </div>
</template>

<script>
import { code } from '../../util/qrcode'
export default {
    data() {
        return {
            text: 'https://www.baidu.com', // 二維碼的參數
            src: '', // 要生成的圖片鏈接（base64）
            opts: {
                errorCorrectionLevel: 'H',
                type: 'image/png', // 支持兩種圖片類型image/png，image/jpeg，image/webp（只在chrome支持）
                rendererOpts: {
                    quality: 1 // 圖片質量0-1
                }
            }
        }
    },
    mounted() {
        // 初始化函數
        this.getCOde(this.text, this.opts)
    },
    methods: {
        getCOde(text, opts) {
            // 調用生成二維碼參數
            code(text, opts).then(data => {
                this.src = data
            })
        }
    }
}
</script>
下面是公共方法
import QRCode from 'qrcode'
export const code = (text, opts) => {
    return new Promise((resolve, reject) => {
        // qrcode的api方法
        QRCode.toDataURL(text, opts)
            .then(data => {
                // 成功輸出數據
                resolve(data)
            })
            .catch(error => {
                reject(error)
            })
    })
}

接下來要用的時候，只要調用方法皆可以了，輸出圖片鏈接了，導出的書base64格式