解决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 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
JavaScript字符串对象
Jan 14 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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安全上传图片的方法
2015/03/21 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
django认证系统 Authentication使用详解
2019/07/22 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
python实现发送邮件
2021/03/02 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
家长对孩子评语
2014/01/30 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
个人安全生产责任书
2014/07/28 职场文书
公司股东合作协议书
2014/09/14 职场文书
中学教师个人总结
2015/02/10 职场文书
小学班主任个人总结
2015/03/03 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2015年大学生工作总结
2015/04/21 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android