投稿されたQRコード画像を読み込み解析

ドラッグ&ドロップで投稿可能

view source

JavaScript


//https://github.com/cozmo/jsQR

var readQRcode = function(imageData, width, height){
  const code = jsQR(imageData, width, height);
  console.log(code);
  if(!code){return;}
  msg.textContent = code.data;
}





var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var msg = document.createElement('p');
var img = new Image();
img.src = '/img/qr-hi0a.com-280x280.png';
msg.textContent = 'drag drop local image (QRcode)';

img.addEventListener('load', function(){
  var width = img.naturalWidth ;
  var height = img.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);
  var imageData = ctx.getImageData(0, 0, width, height);
  readQRcode(imageData.data, width, height);
});

var inputFile = document.createElement('input');
inputFile.type = 'file';

document.getElementById('demo').appendChild(inputFile);
document.getElementById('demo').appendChild(msg);
document.getElementById('demo').appendChild(img);





var  dragArea = document.body;
dragArea.ondragstart = function(event){
  if(!event.dataTranfer){return;}
  event.dataTranfer.addElement(container);
}
dragArea.ondragover = function(event){
  event.preventDefault();
}
dragArea.ondragleave = function(event){
  event.preventDefault();
}
dragArea.ondrop = function(event){
  event.preventDefault();
  console.log(event.dataTransfer.files);
  if(!event.dataTransfer.files.length){
    return;
  }
  var file = event.dataTransfer.files[0];
  fileNameDef = file.name.substr(0,6);

  var reader = new FileReader();
  reader.readAsDataURL(file)

  reader.onload = function(){
    img.src = reader.result;
  }
}

inputFile.onchange = function() {
  let files = this.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(files);
  reader.onload = function() {
    img.src = reader.result;
  }
}

CSS

#demo{
  padding:20vh 0;
  text-align:center;
}

#demo p{
  padding:10px 0;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-QR-code-read/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。