ホームページ > 記事 > ウェブフロントエンド > jqueryプラグインqrcodeはQRコードを生成します online_jquery

jqueryプラグインqrcodeはQRコードを生成します online_jquery

WBOYオリジナル: 2016-05-16 16:02:161381ブラウズ

モバイルインターネットの発展に伴い、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

jquery-qrcodeはブラウザ側でQRコードを生成できるjqueryプラグインです。自己完結型で、最小限の圧縮で 4K 未満であり、画像のダウンロードリクエストはありません。このクラスライブラリを導入すると、たった 1 行のコードで Web ページに QR コードを簡単に追加できるようになります。

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 つだけになります。

コードの実装

実際には github に非常に詳細な手順と例があるため、ここでは詳しく説明しません。

ただし、将来の使用の便宜のために、インターネット上のみんなの経験に基づいてコードを再編成します。

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>

公式サンプルテストによると、認識された中国語の QR コードが文字化けすることがわかります。

善意のネチズンの説明によると、

これは、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;
}

上記は、今日皆さんに共有したすべての内容です。jQuery を学習する皆さんのお役に立てれば幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery は、プロンプトを渡すマウスのマップホットスポット効果を実装します。次の記事：jQuery は、プロンプトを渡すマウスのマップホットスポット効果を実装します。

続きを見る

jqueryプラグインqrcodeはQRコードを生成します online_jquery

関連記事