js を使用して QR コードを生成するサンプルコード

以前、プロジェクトでQRコードをスキャンして情報を表示する機能を開発する必要がありました。インターネットでいくつかの情報を調べ、使用する方法をまとめました。 qrcode js プラグインをインポートする必要があります。

プラグインリンク: qrcode.js のダウンロードアドレス、クリックしてダウンロード

1. 簡単な例

以下の通りです（参考のみ）

<%--
 IntelliJ IDEA によって作成されました。
 ユーザー: ASUS
 著者:xumz
 日付: 2021/2/27
 時間: 10:33
 このテンプレートを変更するには、[ファイル] | [設定] | [ファイル テンプレート] を使用します。
--%>
<%@ ページ language="java" contentType="text/html; charset=UTF-8" ページエンコーディング="UTF-8" %>
<html>
<ヘッド>
 <script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
 <script src="js/qrcode.min.js" type="text/javascript"></script>
</head>
<本文>

<h1>URL を入力して QR コードを生成します</h1>
<div>
 <label for="qr_link">URL:</label>
 <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/>
 <input type="button" id="qr_creat" value="生成">
 <p>生成された QR コードは、任意の携帯電話ツールでスキャンして QR コード情報を表示できます</p>
 <br/>
</div>
<br>
<div id="qr_container" style="margin:auto; position:relative;"></div>

<script type="text/javascript">
 //生成ボタンをクリックした後 document.getElementById("qr_creat").onclick = function() {
  var qrcode = new QRCode( //QR コードをインスタンス化して生成 document.getElementById("qr_container"), { //QR コードが保存される div
    width: 160, //幅と高さを設定します height: 160,
   }

  );

  //入力ボックスの値に基づいて QR コードを生成しますqrcode.makeCode($('#qr_link').val());
  $("#qr_container").append("<br><br>"); //改行}
</スクリプト>

</本文>
</html>

コード実行効果は次のとおりです。

ここに画像の説明を挿入

2. 2つの簡単な例

2 番目の例では、layui の一部の要素を使用します。layui リンクをダウンロードし、layui.all.js と layui.css をインポートします。

ここに画像の説明を挿入

scanQR.jsp は次のとおりです。

<%@ ページ language="java" contentType="text/html; charset=UTF-8" ページエンコーディング="UTF-8" %>
<!DOCTYPE html>
<html>
<ヘッド>
 <title>テスト1</title>
 <%--参照とアドレスに注意してください--%>
 <script src="js/qrcode.min.js"></script>
 <script src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript" src="js/layui/layui.all.js"></script>
 <link type="text/css" rel="styleSheet" href="js/layui/css/layui.css" rel="外部 nofollow" />
</head>
<本文>

<div align="center">
 <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">プレビュー</button>
</div>

<div id="code" style="display: none;">
 <div id="qrcode" style="margin-left: 75px;margin-top: 20px"></div>
</div>

<スクリプト>

 layui.use(['レイヤー'], 関数() {
  var レイヤー = layui.layer
 });

 // QRコードを生成するためのリンクを設定します new QRCode(document.getElementById("qrcode"), {
  text: 'https://blog.csdn.net/bug_producter/', //アドレス幅の変更に注意してください: 250,
  高さ: 250
 });

 //ポップアップボックスのプレビュー関数 skipHandle() {
  レイヤーを開く({
   タイプ: 1,
   title: "bug_producter's blog", //タイトル領域: ['400px', '400px'],
   コンテンツ: $('#code').html(),
  });
 }

</スクリプト>
</本文>
</html>

操作効果は以下のとおりです。

ここに画像の説明を挿入

これはブロガーが生成した QR コードです。スキャンすると、ブロガーのホームページにリダイレクトされます。モバイルブラウザー、WeChat、QQ などでスキャンできます。キーコードは、次のテキストです: 'https://blog.csdn.net/bug_producter/'

興味のある方は、

携帯電話からローカル Tomcat サーバーへのアクセス

この記事の最後には、QR コードに関するコンテンツもあり、サンプルファイルも追加されます。

js で QR コードを生成するサンプルコードに関するこの記事はこれで終わりです。js で QR コードを生成することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: