jqueryプラグインqrcodeを使用してQRコードを生成する

jqueryプラグインqrcodeを使用してQRコードを生成する_jquery

WBOY

リリース： 2016-05-16 15:35:40

オリジナル

1582 人が閲覧しました

QR コードアプリケーションは私たちの生活や仕事に浸透しています。携帯電話で QR コードを「スキャン」するだけで、対応する情報を取得できるため、販売者を理解したり、買い物をしたり、映画を見たりするのに便利です。。この記事では、jquery ベースの QR コード生成プラグイン qrcode を紹介します。このプラグインをページ上で呼び出すと、対応する QR コードを生成できます。
qrcode は実際に jQuery を使用してグラフィックのレンダリングと描画を実現し、キャンバス (HTML5) とテーブルをサポートしています。最新のコードはここから入手できます。

使用方法
1. まず、jquery ライブラリファイルと qrcode プラグインをページに追加します。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

ログイン後にコピー

2. QR コードを表示する必要があるページに次のコードを追加します。

<div id="code"></div>

ログイン後にコピー

3. qrcode プラグインを呼び出します。
qrcode は、画像のレンダリングにキャンバスとテーブルの 2 つのメソッドをサポートしています。もちろん、ブラウザが HTML5 をサポートしている必要があるため、キャンバスメソッドがデフォルトで使用されます。次のように直接呼び出します:

$('#code').qrcode("http://www.jb51.net"); //任意字符串

ログイン後にコピー

次の方法で電話をかけることもできます:

$("#code").qrcode({ 
  render: "table", //table方式 
  width: 200, //宽度 
  height:200, //高度 
  text: "http://www.jb51.net" //任意内容 
});

ログイン後にコピー

このようにして、QR コードをページ上で直接生成でき、携帯電話の「スキャン」機能を使用して QR コード情報を読み取ることができます。
中国語を認識します
実験中に、中国語のコンテンツを含む QR コードが認識できないことがわかりました。さまざまな情報を調べたところ、jquery-qrcode はエンコード変換に charCodeAt() メソッドを使用していることがわかりました。このメソッドはデフォルトで Unicode エンコードを取得します。中国語のコンテンツがある場合は、QR コードを生成する前に文字列を UTF-8 に変換する必要があります。その後、QR コードが生成されます。次の関数を使用して中国語の文字列を変換できます:

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;  
}

ログイン後にコピー

以下の例:

var str = toUtf8("脚本之家！"); 
$('#code').qrcode(str);

ログイン後にコピー

現在、オンラインで QR コードを作成する方法に関するチュートリアルがたくさんあります。それらを柔軟に使用して、お気に入りの方法を選択して、QR コードを作成するスキルを習得する必要があります。