快捷導(dǎo)航

解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問(wèn)題

更新時(shí)間：2020年07月09日 09:40:32 作者：jsoncode

這篇文章主要介紹了解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

根據(jù)qrcode的文檔說(shuō)明：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
});

要有一個(gè)元素存放二維碼，

可以看到這個(gè)div中被追加了canvas,img兩個(gè)標(biāo)簽。

但是我想不想創(chuàng)建這個(gè)div啊。然后我就找到了node-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>

很顯然這種和前面那個(gè)一樣，需要先創(chuàng)建一個(gè)標(biāo)簽。

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

終于找到我想要的了，不過(guò)，這里的url是base64,如果二維碼過(guò)大的話，使用base64進(jìn)行圖片渲染，會(huì)導(dǎo)致瀏覽器崩潰，這個(gè)問(wèn)題后面解決。

那么問(wèn)題又來(lái)了，這個(gè)node-qrcode只能用在vue中使用（不能直接在瀏覽器運(yùn)行，需要特殊處理），如果想直接使用（或在vue中使用cdn）必須用第一種模式。

這問(wèn)題有繞回來(lái)了。

暫時(shí)沒(méi)有好的方案。自己二次優(yōu)化一下吧。

既然第一種方案里，有一個(gè)img標(biāo)切，是不是可以讀取圖片流，然后自己處理？

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);

發(fā)現(xiàn)是空的''.
根據(jù)以往經(jīng)驗(yàn)，這里的圖片，可能需要時(shí)間來(lái)渲染？

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

果然拿到了base64地址。
到此，就已經(jīng)解決所有問(wèn)題，剩下的，就是自己畫(huà)個(gè)二維碼了（這種方法生成的二維碼，沒(méi)有邊距留白，非常丑）

// 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的頭，并轉(zhuǎn)化為byte
   var bytes = window.atob(arr[1]);
   // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
   ab = new ArrayBuffer(bytes.length);
   // 生成視圖（直接針對(duì)內(nèi)存）：8位無(wú)符號(hào)整數(shù)，長(zhǎng)度1個(gè)字節(jié)
   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)))
  })
 }
}

到此這篇關(guān)于解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問(wèn)題的文章就介紹到這了,更多相關(guān)qrcode.js二維碼定義一個(gè)空div內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: