Heim > Artikel > Web-Frontend > So erhalten Sie mithilfe von JavaScript einen Barcode aus einem Bild

So erhalten Sie mithilfe von JavaScript einen Barcode aus einem Bild

不言Original: 2018-07-03 10:24:452611Durchsuche

Dieser Artikel konzentriert sich auf die Einführung von JavaScript zur Erkennung von Barcodes in Bildern. Er ist sehr gut und hat Referenzwert.

Kürzlich Wenn Sie an einem Einzelhandelssupermarktprojekt arbeiten, müssen Sie die Daten jedoch selbst eingeben. Es gibt jedoch einige Supermärkte mit mehr als 1.000 Produkten. Daher ist es viel effizienter, sie einzeln einzugeben Scannen des Barcodes des Produkts und Abrufen der Produktinformationen basierend auf dem Barcode.

Beschaffung von Produktinformationen auf Basis von Barcodes Es gibt viele APIs im Internet, die in der Regel nicht teuer sind und direkt genutzt werden können.

Hier konzentrieren wir uns auf die JavaScript-Erkennung von Barcodes in Bildern.

Open-Source-Bibliothek quaggaJS

Projektadresse: https://github.com/serratus/quaggaJS

Danke hier Der Master hat eine so tolle js-Bibliothek zur Verfügung gestellt, damit meine Idee verwirklicht werden kann!

Die Verwendung dieser Bibliothek ist ebenfalls sehr einfach. Es gibt ausführliche Erklärungen auf Github, aber ich habe nur eine der Funktionen zum Scannen von Barcode-Bildern und zum Abrufen von Barcodes verwendet, daher habe ich nur die Funktionen aufgelistet, die ich benötige Wenn Sie beispielsweise andere Anforderungen haben, finden Sie diese im obigen Link.

Seitenteil

<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-Teil

$(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="So erhalten Sie mithilfe von JavaScript einen Barcode aus einem Bild" ></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);
      });
    }
  });
});

Effektanzeige

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!

Verwandte Empfehlungen:

Nativer JS+Canvas-Code zur Implementierung des Backgammon-Spiels

jquery zur Erzielung des horizontalen Scrolleffekts von Bildern

Das obige ist der detaillierte Inhalt vonSo erhalten Sie mithilfe von JavaScript einen Barcode aus einem Bild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery JS canvas github https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nativer JS+Canvas-Code zur Implementierung eines Backgammon-SpielsNächster Artikel：Nativer JS+Canvas-Code zur Implementierung eines Backgammon-Spiels

In Verbindung stehende Artikel

Mehr sehen