vue url生产二维码

Posted 2021-01-24 web-fusheng

 

 

<template>
    <div id="QRcode">
       <div class=‘QR-qrcode‘ style=‘display:none;‘></div>
    </div>
</template>
<script>

    import QRCode from ‘qrcode-js-package‘

    export default {
        data () {
            return {

            }
        },
        props: {
            size: {
                type: Number,
                default: 180,
            },
            value: {
                type: String,
                default: ‘‘,
            },
        },
        watch:{
            "$parent.qrText"(newVal){
                this.getQRcodeImg((base64)=>{
                    document.getElementsByClassName("QR-download")[0].href = base64 ;
                });
            },
        },
        methods: {
            concatCanvas(dom,canvas1,padding){
                /**
                 * @param {Number} padding 图片的padding，默认20
                 * @return {String} 返回base64字符串
                 *
                 */
                var c1h = canvas1.height,
                    c1w = canvas1.width,
                    context=‘‘,
                    canvas = document.createElement("canvas");
                padding = padding || 20 ;
                canvas.height = c1h + 2.5 * padding ;
                canvas.width = c1w + 2 * padding ;
                /** end **/
                dom.appendChild(canvas);
                /** 将canvas画上白色背景 **/
                context = canvas.getContext("2d");
                context.fillStyle ="white";
                context.fillRect(0,0,canvas.width,canvas.height);
                /** end **/

                context.drawImage(canvas1, padding, padding, c1w ,c1h);
                /** end **/
                /** 返回base64,用于注入到a标签里以便下载 **/
                return canvas.toDataURL(‘image/jpeg‘,1);
                /** end **/
            },
            getQRcodeImg(fn,s){
                let url = s||this.value,
                    size = this.size,
                    dom = document.getElementById("QRcode"),
                    $qrcode = dom.getElementsByClassName("QR-qrcode")[0],
                    $main = dom.getElementsByClassName("QR-main")[0];

                new QRCode($qrcode, {
                    text: url,
                    width: size,
                    height: size,
                    correctLevel : QRCode.CorrectLevel.H
                });
                let base64 = this.concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],15);
                fn && fn(base64);
            }
        },
    }
</script>

 

结果：