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);
            })
        }

完毕~