qrcode. js 는 QR 코드 를 생 성하 여 canvas 를 img 으로 바 꾸 고 길 게 누 르 면 저장 합 니 다.

2388 단어 전단
개인 블 로그, 관심 과 소장 을 환영 합 니 다.
qrcode. js QR 코드 생 성:
1, qrcode. js 설치: npm install qrcode
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 으로 변경:
방법 useqrcode (url) 에 다음 코드 를 추가 합 니 다:
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;
}

좋은 웹페이지 즐겨찾기