解决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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
QRCode.js二维码生成并能长按识别
QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 首先引入QRCode.js文件,下载地址 如果生成二维码的信息是固定不变的,那么当然不需要如此这般,网上有好多现成的二维码生成器,直接用就好. 可是,我的需求是这样的,二维码用于在微信或QQ中分享,根据不同的用户信息分别生成不同的二维码,这样就不能偷懒,就得用代码生成了,并且生成的二维码支持长按识别进入. 话不多说,直接上干货: htm
-
使用jquery.qrcode.js生成二维码插件
二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render
-
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
本文实例为大家分享了支持中文,且带logo的二维码的生成代码,供大家参考,具体内容如下 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 //qrcode.js function QR8bitByte(data) { this.mode = QRMode.MODE_8BIT_BYTE; this.data = da
-
二维码图片生成器QRCode.js简单介绍
QRCode.js是一个实现生成二维码(QRCode)的js插件. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5的 Canvas,低版本IE使用table元素绘制),而且QRCode.js没有任何依赖.只需要引用一个QRCode.js. 1.引入qrcode.js <script src="qrcode.js" type="text/javascript"></script> 2.HTML代码 <div id=&qu
-
使用JS 插件qrcode.js生成二维码功能
效果图: qrcode.js这是一个使用比较多的js生成二维码的插件,使用也很方便,第一次用,记录一下使用方法: 首先,导入js,这个网上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/ jsp: <script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"&g
-
QRCode.js：基于JQuery的生成二维码JS库的使用
1. QRCode.js QRCode.js是一个二维码生成javascript库:支持跨浏览器的HTML5 Canvas和表格标签的DOM操作:并且不依赖其它的库或拓展. 主页:QRCode.js Github:davidshimjs/qrcodejs 2. 用法 2.1 基础用法 <div id="qrcode"></div> <script type="text/javascript"> new QRCode(documen
-
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr
-
解决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
-
php生成二维码时出现中文乱码的解决方法
本文实例讲述了php生成二维码时出现中文乱码的解决方法.分享给大家供大家参考.具体分析如下: 最近做了个扫描二维码得到vcard的项目,遇到一个问题,有一部分生成完的二维码,用android系统手机扫描后得到的vcard中的中文姓名是乱码,经过比对发现,这部分vcard中ORG这个类型没有内容,随即判断没内容就加上一个固定的字符串,这样乱码的问题得以解决. php生成二维码的几种方式 1.google开放api,代码如下: 复制代码 代码如下: $urlToEncode="http://www.
-
jquery插件qrcode在线生成二维码
随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维
-
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt
-
js生成二维码的示例代码
前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File
-
Python使用QRCode模块生成二维码实例详解
Python使用QRCode模块生成二维码 QRCode官网 https://pypi.python.org/pypi/qrcode/5.1 简介 python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode 库. 简单用法 import qrcode img = qrcode.make('hello, qrcode') img.save('test.png') 高级用法 import qrcode qr = qrcode.QRCode( version=1
-
C#利用QrCode.Net生成二维码（Qr码）的方法
现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度N多,找到一些项目,但是可用性不强.(有一个项目是用VS2005开发的,在2010中调试不开.)终于在codeplex上找到一个"神器",这个"神器"可以很方便的生成二维码,速度那是相当的快,并且可支持中文,遵从MIT协议. QrCode.Net是一个使用C#编写的用