ホームページ > 記事 > ウェブフロントエンド > JS コードを使用して QR コードを作成し、関数を生成します (詳細なチュートリアル)
この記事では、11行の簡単なJSコードを使用してQRコードを生成する簡単な機能を紹介します。興味のある方は参考にしてください。
HTML コード:
<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">
関連する JS コード:
/** * 生成二维码 * data-width={宽度} * data-height={高度} * data-url={链接} * @param $ele */ var generatorQRCODE = function ($ele) { $ele.hide(); var params = $ele.data(); if(!params['width'] || !params['height'] || !params['url']){ console.log('生成二维码参数错误'); return false; } var image = new Image(); var imageUrl = "http://pan.baidu.com/share/qrcode?w=" + params['width'] + "&h=" + params['height'] + "&url=" + params['url'] + ""; image.src = imageUrl; $ele.attr('src', imageUrl); $ele.show(); }; generatorQRCODE($("#qrcode"));
QR コードを生成する他のケースを共有しましょう:
QR コードを生成するには jquery.qrcode を使用します
まず、1. jquery ライブラリ ファイルと qrcode プラグインをページに追加します
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2. ページ上の QR コードを表示する必要がある場所に次のコードを追加します:
<p id="code"></p>
3. qrcode プラグインを呼び出します。画像レンダリング用のキャンバスメソッドとテーブルメソッドをサポートします
canvasメソッド:
$('#code').qrcode("http://www.baidu.com"); //任意字符串
tableメソッド:
$("#code").qrcode({ render: "table", //table方式 width: 200, //宽度 height:200, //高度 text: "www.helloweba.com" //任意内容 });
4. 生成されたQRコードコンテンツにテキストが含まれている場合、文字列をUTF-8に変換する必要があります
変換メソッドを定義します:
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);
2. Vue-cliプロジェクトでQRコードを動的に生成します
1. qrcodeを導入します-----npm install qrcode
2を導入します。
をmain.jsに追加します 3. QRコードを生成する必要があるコンポーネントにimport QRCode from 'qrcode' //定义生成二维码组件を導入します 4. HTMLで生成された場所を定義し、スタイルの追加に注意してください
import QRCode from 'qrcode' //引入生成二维码组件
<template> <p id="query"> <h1>二维码:</h1> <canvas id="canvas"></canvas> </p> </template>5. 生成された2Dコードをjsで定義します コードメソッド
#canvas{ width: 80%!important; height: auto!important; }以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 関連記事:
jQueryがブラウザ間のジャンプとパラメータ受け渡し機能を実装【漢字対応】
vue-cli axiosリクエストメソッドとクロスドメインの問題への対処
以上がJS コードを使用して QR コードを作成し、関数を生成します (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。