解决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 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
three.js如何实现3D动态文字效果
Mar 03 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php继承的一个应用
2011/09/06 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
javascript时间函数大全
2014/06/30 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
党校自我鉴定范文
2013/10/02 职场文书
倡议书格式
2014/08/30 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书