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;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.