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>

    结果:

  • 相关阅读:
    使用阿里的EasyExcel实现表格导出功能
    推荐一款实用的java工具包---Hutool
    MySQL(二)锁机制【表级锁、页面锁、行级锁】
    MySQL(一)存储引擎
    使用redis的increment()方法实现计数器功能
    Redis缓存浅析
    Dubbo服务介绍
    SpringMVC工作执行流程详解
    GC垃圾回收机制----GC回收算法(GC机制必会知识点)
    数据结构之常见的数据结构
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/10050718.html
Copyright © 2011-2022 走看看