zoukankan      html  css  js  c++  java
  • vue url生产二维码

    <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,
                         size,
                        height: size,
                        correctLevel : QRCode.CorrectLevel.H
                    });
                    let base64 = this.concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],15);
                    fn && fn(base64);
                }
            },
        }
    </script>

    结果:

  • 相关阅读:
    Go语言对etcd的基本操作
    etcd命令行基本操作
    etcd集群部署
    第二十一天python3 python的正则表达式re模块学习
    第二十天python3 正则表达式
    jenkins多分支构建选择
    第十九天python3 json和messagepack
    华为交换机设置ntp时间同步
    交换机端口光衰问题排查
    第十八天python3 序列化和反序列化
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/10050718.html
Copyright © 2011-2022 走看看