javascriptによるQRコードメーカー

program

複数の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>