ホームページ > 記事 > ウェブフロントエンド > jqueryプラグインqrcodeはQRコードを生成します online_jquery
jqueryプラグインqrcodeはQRコードを生成します online_jquery
- WBOYオリジナル
- 2016-05-16 16:02:161362ブラウズ
モバイル インターネットの発展に伴い、QR コードをスキャンすることで Web サイトを閲覧したり、友達を追加したりできるようになり、手入力よりもはるかに便利になりました。
モバイルの段階的な導入を考慮して、初期段階で包括的な評価システムを作成しました。ユーザーが長い IP アドレスのリストを入力するのは不便です。QR コードを使用すると、ユーザーは選択してシステムに直接アクセスできます。携帯電話を立ち上げてスキャンします。
このアプリケーション シナリオに基づいて、Web サイトの QR コードを実装する方法をオンラインで調査しました。要約すると、次の 2 つのタイプがあります。
1. Code Cloud QR コード (QR コード) オンライン ジェネレーターなどの QR コード生成 Web サイトまたは QR コード ジェネレーターを使用して QR コード画像を生成し、Web サイトに貼り付けます。
利点: 開発コストがゼロで、多様な QR コードを迅速に実現できます。デメリット: QRコードの変更と維持が少し面倒
2. バックエンドで Java または .net コードを使用して QR コード画像を生成し、qrcode、zxing などの Web サイト上の画像を参照します。
利点: 高度にカスタマイズ可能、高速なバッチ生成
欠点: 実装が重く、単純なアプリケーションの開発コストが高くなる
3. JavaScript または jquery-qrcode などのその他のメソッドを使用して、フロントエンド ページに QR コード (ˇ?ˇ) を即座に生成します
利点: 軽量実装、画像 IO の削減、トラフィックの節約
欠点: 複雑な QR コードの生成には適していません
もちろん、実際のアプリケーションでは、これら 3 つの実装方法が完全に分離されているわけではなく、プロジェクトの実際の状況に応じてアプリケーションを組み合わせて効率を最大化し、コストを削減することもできます。
夜はあまり時間がなかったので、jquery-qrcodeを勉強することにしました。
jquery-qrcode
Github でホストされています:
https://github.com/jeromeetienne/jquery-qrcode
jquery-qrcode には主に 2 つのファイルが含まれています:1. qrcode.js: QRコードアルゴリズム実装クラス
2. jquery.qrcode.js: jquery を使用して qrcode.js をカプセル化し、キャンバスとテーブルのレンダリングを実装してユーザー パラメーターに従って QR コードを生成します
圧縮後、ファイル jquery.qrcode.min.js は 1 つだけになります。
コードの実装
ただし、将来の使用の便宜のために、インターネット上のみんなの経験に基づいてコードを再編成します。
jquery-qrcode.html コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>
<div id="qrcodeCanvas"></div>
<div id="qrcodeTable"></div>
<script>
//最简用法，render默认是canvas
$('#qrcodeCanvas').qrcode("http://www.jb51.net/");
//完整用法，有默认值的均可省略
$('#qrcodeTable').qrcode({
text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
width: 256,//宽度，默认是256
height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
typeNumber: -1,//计算模式，默认是-1
//correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
background: "#ffffff",//背景颜色，默认是白色
foreground: "#000000"//前景颜色，默认是黑色
});
</script>
<body>
</html>
善意のネチズンの説明によると、
これは、js メカニズムに関連しています。jquery-qrcode ライブラリは、charCodeAt() を使用してエンコード変換を実行します。
このメソッドはデフォルトで Unicode エンコーディングを取得します。通常、デコーダは UTF-8、ISO-8859-1 などを使用します。
英語の場合は問題ありません。通常、Unicode は 2 桁の長さの UTF-16 で実装されていますが、UTF-8 エンコードは 3 桁であるため、QR コードのエンコードとデコードは次のようになります。一致しません。
解決策は、もちろん、QR コードをエンコードする前に文字列を UTF-8 に変換することです
utf16to8.js を利用してこの問題を解決できます。具体的なコードは次のとおりです。
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;
}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。