Vue 相关

qrcodejs2二维码

2018-10-23  本文已影响0人  Augenstern___

    //组件中使用
        // 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();
        }

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

上一篇下一篇

猜你喜欢

热点阅读