JavaScriptでQRを作成するコードサンプル

JSでQRコードを作成する機会があったので、備忘として記載します。

やること

JavaScriptを利用して、QRコードを生成する

利用するライブラリ

qrcode

CDNで提供されているので、それを参照する形式で記述します。

後述のコードで出来るQR画像

コード_単一要素_URL想定

QRを読ませて、WEBサイトに飛ばす想定。

QRCode.toDataURL("https://enishiblog.org")　の""を想定するURLに変更して利用してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>QRコード生成_sample</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        QRCode.toDataURL("https://enishiblog.org")
          .then((url) => {
            document.getElementById("qrcode").src = url;
          })
          .catch((err) => {
            console.error(err);
          });
      });
    </script>
  </head>
  <body>
    <img id="qrcode" alt="QRコード" />
  </body>
</html>

コード_複数要素

QRを読ませて、複数のテキスト情報を表示させて、名刺的に利用する想定。

infoの部分の内容を可変で利用する想定。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>QRコード生成</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let info =
          "会社名: 株式会社QRサンプル\n" +
          "住所: 京都府京都市北区x-x-x\n" +
          "電話: xx-xxxx-xxxx\n" +
          "メール: qr_sample@example.com";

        QRCode.toDataURL(info)
          .then((url) => {
            document.getElementById("qrcode").src = url;
          })
          .catch((err) => {
            console.error(err);
          });
      });
    </script>
  </head>
  <body>
    <img id="qrcode" alt="QRコード" />
  </body>
</html>

サイズや配色の指定

optionsで指定することで、QRコードの大きさや配色を変更することができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let info =
          "会社名: 株式会社QRサンプル\n" +
          "住所: 京都府京都市北区x-x-x\n" +
          "電話: xx-xxxx-xxxx\n" +
          "WEBサイト: https://enishiblog.org\n" +
          "メール: qr_sample@example.com";

        const options = {
          width: 200,
          height: 200,
          color: {
            dark: "#ffffff", // QRコードの自体
            light: "#000000", // QRコードの背景
          },
        };

        QRCode.toDataURL(info, options)
          .then((url) => {
            document.getElementById("qrcode").src = url;
          })
          .catch((err) => {
            console.error(err);
          });
      });
    </script>
  </head>
  <body>
    <h1>QRコード生成_size&color</h1>
    <img id="qrcode" alt="QRコード" />
  </body>
</html>

QRに画像を入れ込む

Canvasを利用して、QRを描画してから画像データを入れ込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>QRコード生成</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let info = "https://enishiblog.org";

        const options = {
          width: 200,
          height: 200,
          color: {
            dark: "#ffffff", // QRコードの自体
            light: "#000000", // QRコードの背景
          },
        };

        const canvas = document.createElement("canvas");
        QRCode.toCanvas(canvas, info, options, (error) => {
          if (error) console.error(error);

          const ctx = canvas.getContext("2d");
          const img = new Image();
          img.src = "{利用したい画像のURL}"; 
          img.onload = () => {
            const imgSize = canvas.width / 5; // QRコードのサイズの1/5に設定
            const imgPosition = (canvas.width - imgSize) / 2; // 中央に配置
            ctx.drawImage(img, imgPosition, imgPosition, imgSize, imgSize);
            document.getElementById("qrcode").src = canvas.toDataURL();
          };
        });
      });
    </script>
  </head>
  <body>
    <img id="qrcode" alt="QRコード" />
  </body>
</html>