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


Posted in Javascript onJuly 09, 2020

根据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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue实现文字加密功能
Sep 27 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 #Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 #Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 #Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 #Javascript
实例讲解React 组件生命周期
Jul 08 #Javascript
详细分析React 表单与事件
Jul 08 #Javascript
You might like
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python中pycurl库的用法实例
2014/09/30 Python
初步探究Python程序的执行原理
2015/04/11 Python
python基础教程之匿名函数lambda
2017/01/17 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
在python中做正态性检验示例
2019/12/09 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
学校卫生检查制度
2014/02/03 职场文书
《中华少年》教学反思
2014/02/15 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python