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

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 コードを再生成
}
});
};
};
});

ダウンロード メソッドは、Angular のサービスにカプセル化できます。

皆さん、qrcode を使用して QR コードを生成できます。とても使いやすいと思います。