qrceode.jsは二次元コードを生成し、canvasをimgに変更し、長押しで保存する.

個人ブログ、注目を集めて収集することを歓迎します.
qrceode.jsは二次元コードを生成する.
1、qrceode.jsをインストールする:npm install qrcuode
2、html内容:

3、js部分:

import QRCode from 'qrcode' //  qrcode
  export default{
    data(){
      return {
      }
    },
    components: {
      QRCode: QRCode //   QRCode  
    },
    methods:{
      useqrcode(url){//url         
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, url, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      }
    },
    mounted(){
      this.useqrcode('www.baidu.com');//          
    }
  }

canvasを[img]に修正する.
メソッドuseqrceodeには、以下のコードを追加します.

useqrcode(url){//url         
    let _this = this;

    let fatherQrcode = document.getElementById('QRCode');           
    //   fatherQrcode img   ：      
    let childs = fatherQrcode.children; 
    console.log(childs);
    for(var i = childs .length - 1; i >= 0; i--) {
        // console.log(typeof childs[i])
        if(childs[i].className == "QRCode"){
            fatherQrcode.removeChild(childs[i]);
        }
    }


    //     
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, url, function (error) {
      if (error) console.error(error)
      console.log('success!');



       //      canvas     img
        var mycanvas1=document.getElementsByTagName('canvas')[0];
        mycanvas1.style.display = 'none'//     canvas
        //     img     html 
        var img=_this.convertCanvasToImage(mycanvas1);
        img.classList.add("QRCode");// img    QRCode
        fatherQrcode.append(img);//imagQrDiv         id

    })
  },
  //   img
    convertCanvasToImage(canvas) {
        // Image  ，     DOM
        var image = new Image();
        // canvas.toDataURL       Base64   URL，  ,         
        //      PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    },

画像を長押しする
css部分:

/*           */
.share>>>img.QRCode{
    -webkit-touch-callout:default;
}