投稿された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廃止等で動かないページもあります。