美文网首页Vue 相关
qrcodejs2二维码

qrcodejs2二维码

作者: Augenstern___ | 来源:发表于2018-10-23 15:41 被阅读0次

        //组件中使用
            // 1.引入:
               import QRCode from 'qrcodejs2'
            //2.html结构
               <div id="qrcode" ref="qrcode"></div>
            //3.方法
                qrcode(){
                    let qrcode = new QRCode('qrcode', {
                    width: 100,
                    height: 100, // 高度
                    text:sessionStorage.getItem('text'), // 二维码内容
                    render: 'canvas',   // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
                   // background: '#f0f',
                   // foreground: '#ff0'
                 });
              },
           //4.调用
    
            //下载
               //html
                 <a id="downloadImg"></a>
                 <button class="button" @click="downloadImg" title="下载">下载</button>
               //方法
                downloadImg(){
              var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
           // 构建画布
              var canvas = document.createElement('canvas');
              canvas.width = img.width;
              canvas.height = img.height;
              canvas.getContext('2d').drawImage(img, 0, 0);
          // 构造url
              var url = canvas.toDataURL('image/png');
              document.getElementById('downloadImg').setAttribute('href', url);
              document.getElementById('downloadImg').setAttribute('download', '邮箱+推荐二维码.jpg');
              document.getElementById('downloadImg').click();
            }
    

    把要下载的图片生成流的形式进行下载

    相关文章

      网友评论

        本文标题:qrcodejs2二维码

        本文链接:https://www.haomeiwen.com/subject/zarazftx.html