複数のQRコードを一括作成する。
以下のライブラリを利用。
https://github.com/jeromeetienne/jquery-qrcode
<html>
<head>
<meta charset="utf-8">
<title>QR Maker</title>
<style>
.label-text { font-size: x-small; }
div { margin-bottom: 50px; }
td { padding-right : 50px; }
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="./src/jquery.qrcode.js"></script>
<script type="text/javascript" src="./src/qrcode.js"></script>
<script>
var outNo = 1;
function reset() {
outNo = 1;
for (var i=0; i<99; i++) {
$("#out" + i).html("");
}
}
function f() {
var val = $("#t").val();
var vals = val.replace(/\r\n/g, "\n").split(/\n/g).filter(function(val) { return val != "" });
var size = $("#size").val();
for (var i=0; i<vals.length; i++) {
if ($("#c").is(':checked')) $("#out" + outNo).append( '<span class="label-text">' + getOutTxt(vals[i]) + '</span>');
$("#out" + outNo).append( $("<div />").qrcode({width: size, height: size, text: vals[i]}) );
}
outNo = outNo + 1
}
function getOutTxt(s) {
var pos = $("#txtOutTxtPos").val();
var len = $("#txtOutTxtLen").val();
if (pos && len) {
return s.substr(pos, len);
}
else
{
return s;
}
}
</script>
<div>
<textarea id="t" class="label-text" style="width:100%;height:100px;">aaa
bbb
ccc</textarea><br>
<button type="button" id="b" onclick="f()">create</button>
<label><input id="c" type="checkbox" checked>ラベル表示</label> 開始位置:<input id="txtOutTxtPos" type="text"> 文字数:<input id="txtOutTxtLen" type="text"><br>
サイズ:<input id="size" type="textbox" value="140"><br>
<button type="button" onclick="reset()">reset</button>
</div>
<table>
<tr>
<td valign="top"><div id="out1"></div></td>
<td valign="top"><div id="out2"></div></td>
<td valign="top"><div id="out3"></div></td>
<td valign="top"><div id="out4"></div></td>
<td valign="top"><div id="out5"></div></td>
<td valign="top"><div id="out6"></div></td>
<td valign="top"><div id="out7"></div></td>
<td valign="top"><div id="out8"></div></td>
</tr>
</table>
</body>
</html>