집 > 기사 > 웹 프론트엔드 > JavaScript를 사용하여 이미지에서 바코드를 얻는 방법

JavaScript를 사용하여 이미지에서 바코드를 얻는 방법

不言원래의: 2018-07-03 10:24:452559검색

이 글은 사진 속 바코드를 인식하는 JavaScript 소개에 중점을 두고 있습니다. 코드가 간단하고 이해하기 쉽습니다. 필요한 친구들이 참고할 수 있습니다.

현재 소매 슈퍼마켓 프로젝트를 진행하고 있습니다. , 하지만 제가 직접 데이터를 입력하는 데 어려움을 겪고 있습니다. 심지어 1,000개가 넘는 상품이 있는 슈퍼마켓도 몇 군데 있습니다. 직접 입력하는 것은 확실히 실용적이지 않으므로, 상품의 바코드를 스캔하여 이를 기반으로 상품 정보를 얻는 것을 고려해 보세요. 훨씬 효율적입니다.

바코드를 기반으로 제품 정보를 얻기 위한 API가 인터넷에 많이 있습니다. 일반적으로 수수료가 높지 않아 여기서는 건너뛰겠습니다.

여기에서는 이미지 속 바코드의 JavaScript 인식에 중점을 둡니다.

오픈 소스 라이브러리 quaggaJS

프로젝트 주소: https://github.com/serratus/quaggaJS

제 아이디어가 실현될 수 있도록 이렇게 훌륭한 js 라이브러리를 제공해 주신 마스터님께 감사드립니다. !

이 라이브러리의 사용법도 매우 간단합니다. github에 풍부한 설명이 있지만 저는 바코드 사진을 스캔하고 바코드를 얻는 기능 중 하나만 사용했기 때문에 다른 용도로 필요한 기능만 나열했습니다. , 위 링크에서 확인하실 수 있습니다.

페이지 부분

<html>
<body>
<section id="container" class="container">
 <p class="controls">
   <fieldset class="input-group">
     <input type="file" accept="image/*;capture=camera">
     <button>Rerun</button>
   </fieldset>
 </p>
 <p id="result_strip">
  <ul class="thumbnails"></ul>
 </p>
 <p id="interactive" class="viewport"><canvas class="imgBuffer" width="800" height="566"></canvas><canvas class="drawingBuffer" width="800" height="566"></canvas><br clear="all"></p>
</section>
<script src="jquery-1.11.0.min.js"></script>
<script src="quagga.min.js" type="text/javascript"></script>
<script src="file_input.js" type="text/javascript"></script>
</body>
</html>

JavaScript 부분

$(function() {
   $(".controls button").on("click", function(e) {
    var input = document.querySelector(".controls input[type=file]");
    if (input.files && input.files.length) {
      Quagga.decodeSingle({
        inputStream: {
          size: 800 // 这里指定图片的大小，需要自己测试一下
        },
        locator: {
          patchSize: "medium",
          halfSample: false
        },
        numOfWorkers: 1,
        decoder: {
          readers: [{
            format: "ean_reader",// 这里指定ean条形码，就是国际13位的条形码
            config: {}
          }]
        },
        locate: true,
        src: URL.createObjectURL(input.files[0])
      }, function(result) {
         var code = result.codeResult.code,
          $node,
          canvas = Quagga.canvas.dom.image;
        // 将扫描得到的条形码打印出来
        $node = $(&#39;<li><p class="thumbnail"><p class="imgWrapper"><img  / alt="JavaScript를 사용하여 이미지에서 바코드를 얻는 방법" ></p><p class="caption"><h4 class="code"></h4></p></p></li>&#39;);
        $node.find("img").attr("src", canvas.toDataURL());
        $node.find("h4.code").html(code);
        $("#result_strip ul.thumbnails").prepend($node);
      });
    }
  });
});

효과 표시

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 결제해주세요. 더 많은 관련 콘텐츠 PHP 중국어 웹사이트에 주목하세요!

JavaScript를 사용하여 이미지에서 바코드를 얻는 방법

관련 기사