jquery QRコード生成プラグイン
2581 ワード
最近、同社のウェブサイトでは、モバイル決済をサポートするために商品リンクを生成する必要があるが、当初はajax調バックエンドjavaサービス(zxing)を考慮してQRコード画像をサーバに保存していたが、クライアントで直接QRコードを生成できるjquery.qrcode.jsというjqueryプラグインを何気なく検索し、使い方が簡単で、まずダウンロード jquery.qrcode.min.jsは、添付ファイルからダウンロードすることもできます.コードは以下の通りです.
jquery.qrcode.min.jsは、htmlにtableを挿入してドットマトリクスで色を塗りつぶしてQRコードを構成する2つのレンダリング方式に分けられ、canvas要素を作成して画像を再描画する(HTML 5の新しい特性).後者は比較的さわやかであるが,ieブラウザの互換性は理想的ではなく,上のコードの15行目にフォールトトレランス処理がある.
プラグインには、次の構成もあります.
中国語のQRコードを生成するには、まず中国語をトランスコードしたほうがいいです.
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script>
$('#qrcode').qrcode({
width: 300,//
height: 300, //
render: !!document.createElement('canvas').getContext ? 'canvas' : 'table', // ， ie canvas
text: window.location.href//
});
</script>
</body>
</html>
jquery.qrcode.min.jsは、htmlにtableを挿入してドットマトリクスで色を塗りつぶしてQRコードを構成する2つのレンダリング方式に分けられ、canvas要素を作成して画像を再描画する(HTML 5の新しい特性).後者は比較的さわやかであるが,ieブラウザの互換性は理想的ではなく,上のコードの15行目にフォールトトレランス処理がある.
プラグインには、次の構成もあります.
typeNumber : -1, //
correctLevel : QRErrorCorrectLevel.H,//
background : "#ffffff",//
foreground : "#000000" //
中国語のQRコードを生成するには、まず中国語をトランスコードしたほうがいいです.
function utf16to8(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;
}