本文重点给大家介绍javascript识别图片中的条形码，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
最近在弄一个零售超市的项目，但是苦于需要自己录入数据，超市少的也有1000多种商品，自己一个一个录入肯定不太现实，所以考虑扫描商品的条形码，根据条形码获取商品的信息这样效率就高多了。
根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高，可以直接拿来用，这里就略过了。
这里重点说说JavaScript识别图片中的条形码。
开源库quaggaJS
立即学习“Java免费学习笔记（深入）”；
项目地址：https://github.com/serratus/quaggaJS
这里要感谢大神提供这么牛B的js库，让我的想法得以实现！
这个库的使用方式也非常简单，在github上有很丰富的讲解，但是我只使用了其中一个扫描条形码图片，获取条形码的功能，所以我就直接把我需要的功能列举一个例子，有其他的需求的可以去上面的连接里面找。
页面部分
登录后复制
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 = $('登录后复制
‘); $node.find(“img”).attr(“src”, canvas.toDataURL()); $node.find(“h4.code”).html(code); $(“#result_strip ul.thumbnails”).prepend($node); }); } });});
效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
原生JS+Canvas实现五子棋游戏的代码
jquery实现图片水平滚动的效果
以上就是使用JavaScript根据图片获取条形码的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747448.html
