解决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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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使用feof()函数读文件的方法
2014/11/07 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python扩展内置类型详解
2018/03/26 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
产品设计开发计划书
2014/05/07 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年宣传工作总结
2015/04/08 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android