Maison > Article > interface Web > Comment obtenir le code-barres d'une image en utilisant JavaScript

Comment obtenir le code-barres d'une image en utilisant JavaScript

不言original: 2018-07-03 10:24:452559parcourir

Cet article se concentre sur l'introduction de JavaScript pour reconnaître les codes-barres dans les images. Le code est simple et facile à comprendre. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Récemment, je le suis. Vous travaillez sur un projet de supermarché de détail. Cependant, vous devez saisir les données vous-même. Il existe même quelques supermarchés proposant plus de 1 000 produits. Il n'est donc certainement pas pratique de les saisir un par un. scanner le code-barres du produit et obtenir les informations sur le produit sur la base du code-barres.

Obtention d'informations sur les produits à partir de codes-barres. Il existe de nombreuses API sur Internet, qui ne sont généralement pas chères et peuvent être utilisées directement, je les ignorerai ici.

Nous nous concentrons ici sur la reconnaissance JavaScript des codes-barres dans les images.

Bibliothèque open source quaggaJS

Adresse du projet : https://github.com/serratus/quaggaJS

Merci ici Le maître a fourni une très bonne bibliothèque js, pour que mon idée puisse être réalisée !

L'utilisation de cette bibliothèque est également très simple. Il existe de riches explications sur github, mais je n'ai utilisé qu'une seule des fonctions de numérisation d'images de codes-barres et d'obtention de codes-barres, j'ai donc simplement listé les fonctions dont j'ai besoin. Par exemple, si vous avez d'autres besoins, vous pouvez les trouver dans le lien ci-dessus.

Partie page

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

Partie 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="Comment obtenir le code-barres d'une image en utilisant 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);
      });
    }
  });
});

Affichage des effets

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

Recommandations associées :

Code natif JS+Canvas pour implémenter le jeu de backgammon

jquery pour obtenir l'effet de défilement horizontal d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript jquery JS canvas github https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Code JS+Canvas natif pour implémenter le jeu de backgammonArticle suivant：Code JS+Canvas natif pour implémenter le jeu de backgammon

Articles Liés

Voir plus