用途
新着
履歴
分類




JS ブラウザでQRコード読み込み

JS ブラウザでQRコード読み込み
JS ブラウザでQRコード読み込み
ブラウザのページのボタンからカメラを起動し、ページに戻ってQRコードから取得した値を表示するサンプルです。

近年QRコードはだいぶ広まってきました。

URLを筆頭に長い文字や数字を打ち込むのが面倒なときの入力補助ツールになっています。

そこで今回はブラウザからカメラを起動させて、QRコードから値を取得してみたいと思います。

早速サンプルです。

以下のボタンを押してQRコードを撮影してみてください。(カメラが対応しないブラウザはファイルアップロードになってしまいます)


あなたが読み込んだQRコードには
ここにQRコードで読み込まれた文字列を表示
という情報がありました。


上記にQRコードが持っている文字情報が表示されたら成功です。

このサンプルはこちらのライブラリを使っています。

https://github.com/sitepoint-editors/jsqrcode

まず、上記のライブラリからqr_packed.jsをDLするかして、JSを読み込んでください。

その後のJSはこちら

<script>
function readQRCamera(node) {
  var reader = new FileReader();
  reader.onload = function() {
    node.value = "";
    qrcode.callback = function(res) {
      if(res instanceof Error) {
        alert("QRコードが見つかりませんでした。写真を取り直してください。");
      } else {
        document.getElementById('demo_text').textContent = res;
      }
    };
    qrcode.decode(reader.result);
  };
  reader.readAsDataURL(node.files[0]);
}
</script>

HTMLはinputタグを使っているのですが、デザインをいじりにくいのでinputタグを非表示にし、labelタグで押せるようにしています。

<label class=demo_qr_btn>
<img src="https://www.kipure.com/shared/api/etc/qr/?str=https%3A%2F%2Fwww.kipure.com%2F">
カメラを起動して<br>QRコードを撮る
  <input type=file
         accept="image/*"
         capture=environment
         onchange="readQRCamera(this);"
         tabindex=-1>
</label>
公開 : 2020-02-04 21:28:21
更新 : 2020-04-18 23:32:51
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top