バーコードから商品を検索 - PHP,MySQL,Flex,JSな日々＋イラストとか

f:id:haru-komugi:20140715183939j:plain
バーコードから商品を検索します。
サンプルはこちら
http://moeten.info/js/20140715_barcodeDetectTest/
ソースはこちら
index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title></title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
  <script type="text/javascript">

    $(function(){

      //
      var resultArray = [];
      var workerCount = 0;
      var DecodeWorker = new Worker("lib/DecoderWorker.js");
      DecodeWorker.onmessage = function(e){

        //
        if(e.data.success === "log") {
          console.log(e.data.result);
          return;
        }

        //終了して、結果が０の場合はもう一度実行する
        if(e.data.finished) {

          workerCount--;
          if(workerCount) {

            if(resultArray.length == 0) {

              //回転してもう一度実行する
              DecodeWorker.postMessage({
                ImageData: ctx.getImageData(0,0,Canvas.width,Canvas.height).data,
                Width: Canvas.width,
                Height: Canvas.height,
                cmd: "right"
              });

            } else {

              workerCount--;

            }

          }

        }

        //成功イベント
        if(e.data.success){

          var tempArray = e.data.result;
          console.log( tempArray );
          for(var i = 0; i < tempArray.length; i++) {
            if(resultArray.indexOf(tempArray[i]) == -1) {
              resultArray.push(tempArray[i]);

              //
              detectISBN(  (tempArray[i]).split(":")[1].trim() );

            }
          }
          $("#result").html( resultArray.join("<br />") );

        }else{

          if(resultArray.length === 0 && workerCount === 0) {
            $("#result").html("Decoding failed.");
          }

        }

      };

      //
      function DecodeBar(){

        //
        Canvas = document.createElement("canvas");
        Canvas.width=640;
        Canvas.height=480;
        ctx = Canvas.getContext("2d");

        showPicture = document.getElementById("picture");

        ctx.drawImage(showPicture,0,0,Canvas.width,Canvas.height);

        //
        resultArray = [];
        workerCount = 2;
        DecodeWorker.postMessage({
          ImageData: ctx.getImageData(0,0,Canvas.width,Canvas.height).data,
          Width: Canvas.width,
          Height: Canvas.height,
          cmd: "normal"
        });

      }

      //
      function detectISBN( isbnNumber ){

        $.ajax({
          url: "https://www.googleapis.com/books/v1/volumes?q="+isbnNumber+"+isbn",
          type: "GET",
          dataType: 'json',
          success: function(data) {

            //console.log( data );
            $("#resultTable").html( $("#template").tmpl( data.items[0] ) );

          }
        });

      }

      //
      $("#file").bind("change", function(){

        var showPicture = document.querySelector("#picture");
        var files  = event.target.files;
        var file = files[0];
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(file);
        showPicture.src = imgURL;
        URL.revokeObjectURL(imgURL);
        showPicture.onload = function(){
          DecodeBar();
        }

      });

    });
  </script>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    body{
      text-align: center;
      padding: 10px;;
    }
    #file{
      background: #ffc578; /* Old browsers */
      background: -moz-linear-gradient(left,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(left,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
      background: linear-gradient(to right,  #ffc578 0%,#fb9d23 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=1 ); /* IE6-9 */
      padding: 10px;
      border-radius: 4px;
      border: 1px solid gray;
      font-weight: bold;
      margin-bottom: 13px;
    }
    #picture{
      max-width: 340px;
      border: 1px solid gray;
      border-radius: 10px;
      box-shadow: 0 0 3px gray;
      margin-bottom: 13px;
    }
    #result{
      border: 1px solid rgb(240, 213, 196);
      border-radius: 4px;
      padding: 10px;
      background: rgb(255, 247, 223);
      margin-bottom: 13px;
    }
    #resultTable{
    }
    #resultTable th{
      width: 20%;
      background: lightgray;
      font-weight: bold;
      padding: 4px;
      border-radius: 4px;
      border: 1px solid rgb(199, 199, 199);
    }
    #resultTable td{
      width: 80%;
      text-align: left;
      padding: 4px;
      border: 1px solid rgb(218, 218, 218);
      border-radius: 3px;
    }
  </style>
</head>
<body>
<input id="file" type="file" accept="image/*" capture="camera">
<div><img alt="" id="picture" width="90%"></div>
<div id="result"></div>
<table id="resultTable"></table>
<script id="template" type="text/x-jquery-tmpl">
  <tr><th>タイトル</th><td>${volumeInfo.title}</td></tr>
  <tr><th>ページ数</th><td>${volumeInfo.pageCount}</td></tr>
  <tr><th>著者</th><td>${volumeInfo.authors}</td></tr>
  <tr><th>出版日</th><td>${volumeInfo.publishedDate}</td></tr>
  <tr><th>説明</th><td>${volumeInfo.description}</td></tr>
  <tr><th>画像</th><td><img src="${volumeInfo.imageLinks.smallThumbnail}"></td></tr>
</script>
</body>
</html>