脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → qrcode.js二维码定义一个空div

解决qrcode.js生成二维码时必须定义一个空div的问题

 更新时间：2020年07月09日 09:40:32   作者：jsoncode  
这篇文章主要介绍了解决qrcode.js生成二维码时必须定义一个空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
});

要有一个元素存放二维码，

可以看到这个div中被追加了canvas,img两个标签。

但是我想不想创建这个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>

很显然这种和前面那个一样，需要先创建一个标签。

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

终于找到我想要的了，不过，这里的url是base64,如果二维码过大的话，使用base64进行图片渲染，会导致浏览器崩溃，这个问题后面解决。

那么问题又来了，这个node-qrcode只能用在vue中使用（不能直接在浏览器运行，需要特殊处理），如果想直接使用（或在vue中使用cdn）必须用第一种模式。

这问题有绕回来了。

暂时没有好的方案。自己二次优化一下吧。

既然第一种方案里，有一个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); 
})

果然拿到了base64地址。
到此，就已经解决所有问题，剩下的，就是自己画个二维码了（这种方法生成的二维码，没有边距留白，非常丑）

// 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生成二维码时必须定义一个空div的问题的文章就介绍到这了,更多相关qrcode.js二维码定义一个空div内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • jQuery中bind()方法用法实例

    jQuery中bind()方法用法实例

    这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能、定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下
    2015-01-01
  • Jquery注册事件实现方法

    Jquery注册事件实现方法

    这篇文章主要介绍了Jquery注册事件实现方法,以实例形式分析了jQuery实现按钮注册鼠标事件的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • 自己动手制作jquery插件之自动添加删除行的实现

    自己动手制作jquery插件之自动添加删除行的实现

    我们常常会遇到这样的情况，一个系统中有大量的需要对一个行进行复制添加，希望能够进行批量的操作，这个时候，我们就可以考虑把它做成一个jquery插件了.
    2011-10-10
  • jQuery预加载图片常用方法

    jQuery预加载图片常用方法

    这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下
    2015-06-06
  • 整理8个很棒的 jQuery 倒计时插件和教程

    整理8个很棒的 jQuery 倒计时插件和教程

    jQuery 是最流行也是使用最广泛的 JavaScript 框架，它简化了 HTML 文档操作，事件处理，动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery 倒计时插件和教程
    2011-12-12
  • JavaScript揭秘：实现自动化连连看游戏

    JavaScript揭秘：实现自动化连连看游戏

    这篇文章主要介绍了JavaScript揭秘：实现自动化连连看游戏的相关资料,需要的朋友可以参考下
    2023-11-11
  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    这篇文章主要介绍了jQuery图片旋转插件jQueryRotate.js用法,结合实例形式分析了图片旋转插件jQueryRotate.js用法,并附带了demo示例代码供读者下载,需要的朋友可以参考下
    2016-01-01
  • Jquery操作Select 简单方便 一个js插件搞定

    Jquery操作Select 简单方便 一个js插件搞定

    Jquery其实本身可以操作select表单，但是由于比较反锁，没有.net 控件那样去操作方便，我在网上Google了一会，发现了一个不错的专门操作select的插件，很好，使用过了，感觉蛮不错的。
    2009-11-11
  • Jquery ajaxStart()与ajaxStop()方法(实例讲解)

    Jquery ajaxStart()与ajaxStop()方法(实例讲解)

    本篇文章主要是对Jquery中的ajaxStart()与ajaxStop()方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • jQuery+ajax简单实现文件上传的方法

    jQuery+ajax简单实现文件上传的方法

    这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下
    2016-06-06

最新评论