vue二維碼識別、二維碼生成

最近項目中有一個需求需要展示微信群二維碼以方便用戶加入群聊，眾所周知的是微信群二維碼是只有7天有效期，當二維碼失效或者群成員已滿后就需要更換二維碼，這個更換頻率還挺高。

微信群二維碼並不能單獨保存圖片，但我只需要二維碼圖片。。。

So，將微信群二維碼解碼后再編碼上傳，下面上代碼

1、選擇圖片並解碼

二維碼解碼

npm install qrcode-decoder --save

// 引入qrcode-decoder
import QrCode from 'qrcode-decoder'

// 二維碼解碼 
// 傳入file對象
function getQrUrl (file) {
    // 獲取臨時路徑 chrome有效，其他瀏覽器的方法請自行查找
    const url = window.webkitURL.createObjectURL(file)
    const qr = new QrCode()
    // 解析二維碼，返回promise
    return qr.decodeFromImage(url)
}

使用van-uploader上傳

<van-uploader v-if="!initQCodeShow" accept="image/*" :preview-image="false" :after-read="handleAfterRead"></van-uploader>
    
   data() {
        return {
            initQCodeShow: false,
            initQCode: "http://xxx",  //生成二維碼的鏈接
        }
    },
    methods:{ 
        handleAfterRead(event) {
            const result = getQrUrl(event.file)// 二維碼解碼
            result.then(res => {
                if (res.data) {
                    this.initQCodeShow = true
                    this.initQCode = res.data
                }
            }).catch(err => {
                console.log(err);
            })
        }
    }

2、生成二維碼（vue-qriously）

npm install vue-qriously --save

　　main.js 引入

import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

<div class="er_code" v-if="initQCodeShow">
   <!-- initQCode: vue實例中定義的變量 size:是這個Canvas的大小 level:二維碼容錯率(L、M、Q、H)-->
   <qriously :value="initQCode" :size="100" level="Q" class="er_code_box"/>
</div>

3、將生成的二維碼保存為圖片並上傳

<div class="caozuo_div">
     <div class="er_sure_btn" @click="savecanvas">上傳</div>
</div>

npm install html2canvas --save

import html2canvas from 'html2canvas'

// 點擊上傳
        savecanvas() {
            let canvas = document.querySelector(".er_code_box")
            let that = this;
            html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
                function(canvas) {
                let type = "png";
                let imgData = canvas.toDataURL(type);
                // 照片格式處理
                let _fixType = function(type) {
                    type = type.toLowerCase().replace(/jpg/i, "jpeg");
                    let r = type.match(/png|jpeg|bmp|gif/)[0];
                    return "image/" + r;
                };
                imgData = imgData.replace(_fixType(type), "image/octet-stream");
                let filename = "UUSound" + "." + type;
                    that.saveFile(imgData, filename);
                }
            );
        },
        dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        },
        saveFile(data, filename) {
            var toFile = this.dataURLtoFile(data, filename);
            console.log(toFile);
            var data = new FormData();
            data.append("img0", toFile);
            this.$axios.post("接口地址", data).then(res=>{
                console.log(res);
            })
        }

完畢~