jQuery.qrcode
實例下載
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode-0.12.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:80});
//二維碼
$("#two").qrcode({
"render": "div",
"size": 100,
"color": "#3a3",
"text": "http://liubo.club"
});
});
</script>
</head>
<body>
二維碼
<br>
<div id="two"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-barcode-2.0.1.js"></script>
<script type="text/javascript" src="jquery.qrcode-0.12.0.min.js"></script>
<script type="text/javascript">
- //中文問題
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
$(function(){
$("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:80});
//二維碼
$("#two").qrcode({
"render": "div",
"size": 100,
"color": "#3a3",
"text": "http://liubo.club"
});
//生成條形碼
$("#genid").click(function(){
var code = $("#orgcode").val();
$("#mycode").barcode(code, "codabar",{barWidth:2, barHeight:80});
});
//生成二維碼
$("#twobtn").click(function(){
var qrcode = $("#twotext").val();
qrcode =toUtf8(qrcode);
$("#twoimg").qrcode({
"render": "div",
"size": 100,
"color": "#3a3",
"text": qrcode
});
});
});
</script>
</head>
<body>
首先自動生成條形碼 123456789
<div id="bcTarget"></div>
輸入要生成條形碼的數字
<input type="text" id ="orgcode">
<div id="mycode"> </div>
<input type="button" value="生成條形碼" id="genid"/>
<br>
<p>
liubo.club 二維碼
<br>
<div id="two"></div>
<p>
輸入內容生成二維碼
<input type="text" id="twotext"/>
<br>
<input type="button" value="生成二維碼" id="twobtn"/>
<div id="twoimg"> </div>
</body>
</html>
關於生成的選項
Usage
The syntax is very simple. Just use
$(selector).qrcode(options);
to append a new generated HTML element representing the QR code to the selected elements. If the selected element already is a canvas
element,
then the QR code is drawn onto it.
Options
The available options and their default values are:
{
// 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: 200,
// code color or image element fill: '#000',
// background color or image element, null for transparent background background: null,
// content text: 'no text',
// 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}