jquery コンポーネント qrcode を使用して QR コードとアプリケーション guide

jquery コンポーネント qrcode を使用して QR コードとアプリケーション guide_jquery を生成する

WBOY

リリース： 2016-05-16 16:13:28

オリジナル

1511 人が閲覧しました

QR コードの生成など、クライアント上で計算できる CPU を消費する計算がいくつかあります。

qrcode は実際に計算し、jquery を使用してグラフィックスのレンダリングと描画を実現します。必要な QR コードを生成するためのキャンバスメソッドとテーブルメソッドをサポートします。

具体的な使用方法
qrcode は jquery コンポーネントであり、少なくとも 2 つの js、つまり jquery と jquery.qrcode が必要です。 https://github.com/jeromeetienne/jquery-qrcode にアクセスして、最新のコードを取得できます。

コードをコピーしますコードは次のとおりです:

ページ上で、QR コードを表示する必要がある場所に空の要素 (ここでは div を使用) を追加します

コードをコピーしますコードは次のとおりです:

QR コードを生成する必要がある場合は、ステートメントを呼び出して直接生成します。

コードをコピーしますコードは次のとおりです:

$("#qrcode").qcrode("http://www.jb51.net");//生成する必要があるページ

詳細パラメータ

パラメータのデフォルト値の説明
render Canvas レンダリングメソッド。キャンバスとテーブルをサポートします
幅なし幅
高さなし高さ
テキストなし URL を生成する必要があります

例:

コードをコピーしますコードは次のとおりです:

$("#qrcode").qcrode({
レンダリング: "テーブル",
幅: 200、
高さ: 200、
テキスト: "http://www.jb51.net"
});

URL 内の漢字の問題を解決する方法

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

コードをコピーコードは次のとおりです:

function toUtf8(str) { 

    var out、i、len、c;    

    アウト = "";    

    len = 文字列の長さ;    

    for(i = 0; i 
        c = str.charCodeAt(i);    

        if ((c >= 0x0001) && (c 
            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));    

        } 

    } 

    出て行きます。    

}

下載二维码

フロントエンドで作成された 2 つのコードを使用します。キャンバスではなくテーブルです。どうやってダウンロードしますか? キャンバスの内容を画像上に描画するだけで、すぐにダウンロードできます。

复制代代码如下:

function download(canvasElem, filename, imageType) {

    var イベント、saveLink、imageData、defalutImageType;

    defalutImageType = 'png';//定义默认图片型

    imageData = CanvasElem.toDataURL(imageType || defalutImageType);//canvas元素转化を画像データにします

    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

    saveLink.href = imageData;

    saveLink.download = ファイル名;

    イベント = document.createEvent('MouseEvents');

    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    saveLink.dispatchEvent(イベント);

};

angular 内の简单封装

Angular での使用では、以前に取り込まれた 2 つの js ファイルを保証する必要はありません。

复制代码代码如下:

var appModule = angular.module('app', []);

appModule.directive('qrcode', function() {

戻り値 {

制限: "A"、

スコープ: {

テキスト: '=',

オプション: '='

}、

リンク: function(scope, elem, attrs) {

var $elem, options;

$elem = $(elem);

options = { //要素の幅と高さを取得します 

幅: $elem.width(),

高さ: $elem.height()

};

angular.extend(options,scope.options);

scope.$watch('text', function(newText) {

if (newText) {

options.text = newText;

$(elem).qrcode(options);//QR コードを再生成

}

});

};

};

});