javascript - 在一个页面上创建多个二维码
问题描述
我需要在一个页面上创建多个二维码。
我使用的图书馆
https://larsjung.de/jquery-qrcode/
我使用这样的代码打印多个,但二维码将值创建为“无文本”。
text: $(this).data('qrCodeVal'),
它使用下面的代码生成 1 个条形码,但不幸的是,我无法创建多个条形码。
$(".qrCode").qrcode({
// render method: 'canvas', 'image' or 'div'
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 100,
// code color or image element
fill: '#000',
// background color or image element, null for transparent background
background: null,
// content
text: 'test qr code value',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" ></script>
<div class="qrCode" data-qrCodeVal="qrCodeValue1"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue2"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue3"></div>
<div class="qrCode" data-qrCodeVal="qrCodeValue4"></div>
解决方案
数据属性应全部为小写,要使用“$(this)”,您需要每个
你有 DIVS 所以将画布更改为 div
$(".qrCode").each(function() {
$(this).qrcode({
// render method: 'canvas', 'image' or 'div'
render: 'div',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 100,
// code color or image element
fill: '#fff',
// background color or image element, null for transparent background
background: null,
// content
text: $(this).data('qrcodeval'),
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#fff',
image: null
});
});
div {
margin: 20px;
border: 3px solid red;
display: inline-block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="qrCode" data-qrcodeval="test qr code value 1"></div>
<div class="qrCode" data-qrcodeval="test qr code value 2"></div>
<div class="qrCode" data-qrcodeval="test qr code value 3"></div>
<div class="qrCode" data-qrcodeval="test qr code value 4"></div>
推荐阅读
- python - 请帮我。我是python的初学者
- java - log4j 创建空日志文件
- python - 将缺失的日期添加到时间序列数据框
- javascript - 为什么使用 JQuery AJAX 会阻止这个承诺链工作?
- java - 使用 JJTree 创建 AST
- python - 使用 boto3 读取 DynamoDb 中 Array 内的数据映射
- android - Android PDF 到 Base64 的转换不起作用
- mongoose - AdonisJS RuntimeException:E_CANNOT_LOGIN:无法登录用户,因为未定义用户 ID
- flutter - 如何在颤振中使用地图来解决我遇到的问题
- xcode - Xcode:将随机显示的条目/文本从数据库保存到文件