JavaScript を使用した QR コード

[Clique aqui para ler em português]

今日、私たちはすべてに QRCode を使用しており、小さな情報を簡単に共有できるようになっています.そのため、js lib を使用して、javascript で QRCode を作成することがいかにシンプルで簡単かを示します.

コード

最初にインターフェイスを作成しましょう.HTML だけを使用して簡単なことを行います.

<h1>Gerar QRcode</h1>
<input type="text" id="text">
<input type="text" id="width" value="256">
<input type="text" id="height" value="256">
<input type="color" id="dark" value="#000000">
<input type="color" id="light" value="#ffffff">
<button id="generate">Gerar</button>
<a id="download" style="display: none;">Download</a>
<div id="qrcode"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>

この最初の部分には、高さ、幅、色などのデータ エントリがあり、QR コードをダウンロードするボタン、qr コードを表示する div もあり、最後に davidshimjs ライブラリをロードするスクリプト タグがあります.ライブラリですが、これは使用方法を示すのに最も簡単であることがわかったものですが、あなたが一番好きなライブラリを使用することができます.

const qrcodeEl = document.querySelector('#qrcode');
const textEl = document.querySelector('#text');
const generateEl = document.querySelector('#generate');
const widthEl = document.querySelector('#width');
const heightEl = document.querySelector('#height');
const darkEl = document.querySelector('#dark');
const lightEl = document.querySelector('#light');
const downloadEl = document.querySelector('#download');

generateEl.addEventListener('click', generate);

function generate() {
  qrcodeEl.innerHTML = ``;
  new QRCode(qrcodeEl, {
    text: textEl.value,
    width: widthEl.value,
    height: heightEl.value,
    colorDark: darkEl.value,
    colorLight: lightEl.value
  });

  download();
}

function download() {
  const canvasEl = qrcodeEl.querySelector('canvas');
  let data = canvasEl.toDataURL('image/png');

  downloadEl.setAttribute('href', data);
  downloadEl.setAttribute('download', 'qrcode.png');
  downloadEl.style.display = 'inline-block';
}

私たちのJavaScriptコードで.最初にすべての画面要素 (高さ、幅、色など) を取得し、クリック イベントを Gelar ボタンに追加して生成関数を呼び出します.

generate 関数では、最初に qrcode がある要素を取得し、新しい qrcode を生成するたびに古いものを画面から削除するように qrcodeEl.innerHTML = ` `; を作成します.次に、必要なすべてのパラメーター (高さ、幅、色など) を渡して QRCode をインスタンス化し、最後にダウンロード関数を呼び出します.

ダウンロード関数では、QRCode ライブラリによって生成されたキャンバス要素を探し、その中にデータ (画像) を取得します.これにより、ダウンロード リンクでキャプチャされた値を追加し、ダウンロード属性を定義して、画面に表示されるようにスタイルを変更します.

新しい QRCode が生成されるたびに、ダウンロード リンクが表示されるので、qrcode を画像としてダウンロードできます.

そのように簡単に準備ができています.

デモ

完全な作業プロジェクトについては、以下を参照してください.



click here が表示されず、最終結果が表示されない場合

ユーチューブ

ご覧になりたい場合は、YouTube で開発の様子をご覧ください.

読んでくれてありがとう！

質問、苦情、またはヒントがある場合は、ここのコメントに残してください.喜んでお答えします!

😊😊 またね! 😊😊

サポートミー

Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso