해결js가 QR코드를 생성할 때 빈 div 문제를 정의해야 합니다

qrcode의 설명에 따르면:https://github.com/davidshimjs/qrcodejs


<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "sample text");
// or 
new QRCode(document.getElementById("qrcode"), {
 text: 'sample text',
 width: 200,
 height: 200,
 colorDark: "#000000",
 colorLight: "#ffffff",
 correctLevel: QRCode.CorrectLevel.H
});

QR코드를 저장하는 요소가 있어야 합니다.
이div에 canvas,img 두 개의 라벨이 추가된 것을 볼 수 있습니다.
근데 이div를 만들고 싶지 않아요?그리고 노드-qrcode를 찾았어요.
그는 두 가지 용법이 있다.


<html>
 <body>
 <canvas id="canvas"></canvas>
 <script src="bundle.js"></script> 
 </body>
</html>
<script>
 var QRCode = require('qrcode')
 var canvas = document.getElementById('canvas')
 QRCode.toCanvas(canvas, 'sample text', function (error) {
  if (error) console.error(error)
  console.log('success!');
 })
</script>

이것은 앞의 것과 마찬가지로 먼저 라벨을 만들어야 한다는 것이 분명하다.


var QRCode = require('qrcode')
 
QRCode.toDataURL('I am a pony!', function (err, url) {
 console.log(url)
})

마침내 내가 원하는 것을 찾았지만, 이곳의 URL은base64입니다. 만약 QR코드가 너무 크면base64를 사용하여 그림을 렌더링하면 브라우저가 붕괴될 수 있습니다. 이 문제는 뒤에서 해결됩니다.
그러면 문제가 또 생겼습니다. 이 node-qrcode는 vue에서만 사용할 수 있습니다. (브라우저에서 직접 실행할 수 없습니다. 특수 처리가 필요합니다.) 직접 사용하려면 (또는 vue에서 cdn을 사용하려면) 첫 번째 모드를 사용해야 합니다.
이 문제는 되돌아왔다.
당분간 좋은 방안이 없다.스스로 2차적으로 최적화하세요.
첫 번째 방안에img표시가 있는데 그림 흐름을 읽고 스스로 처리할 수 있습니까?


var div = document.createElement('div');
var size = 200;
var padding = 20;
var bg = '#ffffff';
new QRCode(div, {
 text: val,
 width: size,
 height: size,
 colorDark: "#000000",
 colorLight: bg,
 correctLevel: QRCode.CorrectLevel.H
});
console.log(div.querySelector('img').src);

비어 있는 걸 발견했어요.'
과거의 경험에 의하면, 이곳의 사진은 과장하는 데 시간이 필요할 수 있습니까?


div.querySelector('img').addEventListener('load', (event) => {
 var img = event.target;
 console.log(img.src); 
})

역시 베이스64 주소를 받았네.
여기서 모든 문제를 해결했고 나머지는 스스로 QR코드를 그렸다(이런 방법으로 생성된 QR코드는 여백이 없고 매우 못생겼다)


// https://github.com/davidshimjs/qrcodejs
export default {
 imageBase64ToBlob(urlData, type = 'image/jpeg') {
  var ab = null;
  try {
   var arr = urlData.split(',')
   var mime = arr[0].match(/:(.*?);/)[1] || type;
   //  url ， byte
   var bytes = window.atob(arr[1]);
   //  , ascii 0 0
   ab = new ArrayBuffer(bytes.length);
   //  （ ）：8 ， 1 
   var ia = new Uint8Array(ab);

   for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
   }

   return new Blob([ab], {
    type: mime
   });
  } catch (e) {
   ab = new ArrayBuffer(0);
   return new Blob([ab], {
    type: type,
   });
  }
 },
 createQr(val, back) {
  var div = document.createElement('div');
  var size = 200;
  var padding = 20;
  var bg = '#ffffff';
  new QRCode(div, {
   text: val,
   width: size,
   height: size,
   colorDark: "#000000",
   colorLight: bg,
   correctLevel: QRCode.CorrectLevel.H
  });
  var canvas = div.querySelector('canvas');
  div.querySelector('img').addEventListener('load', (event) => {
   var img = event.target;
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = bg;
   ctx.fillRect(0, 0, size, size);
   // ctx.clearRect(0, 0, size, size);
   ctx.drawImage(img, 0, 0, img.width, img.height, padding, padding, size - 2 * padding, size - 2 * padding);
   let url = canvas.toDataURL();
   back(URL.createObjectURL(this.imageBase64ToBlob(url)))
  })
 }
}

이 책은 qrcode 해결에 관한 것입니다.js가 QR코드를 생성할 때 빈 div를 정의해야 하는 문제를 소개한 글입니다. 더 많은 관련qrcode.js QR코드에 빈 div 내용을 정의합니다. 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Java가 Google Zxing을 사용하여 QR코드를 생성하는 예

예전에 jQuery만 썼어요.qrcode는 QR코드를 생성한 적이 있습니다. 이번에는 Google의 zxing이 자바 코드를 통해 QR코드를 생성하고 흐르는 방식으로 프론트 페이지로 출력하는 것을 사용합니다. 필요한...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

해결js가 QR코드를 생성할 때 빈 div 문제를 정의해야 합니다

좋은 웹페이지 즐겨찾기