前端实时识别条形码 quagga.js
2024-05-10 14:03:11
使用了https://github.com/serratus/quaggaJS的quagga.js
代码为半成品，效果可以实现，多余代码未删除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"xmlns:th="https://www.thymeleaf.org"><title>Title</title><style>video {width: 50%;height: 50%;margin: 50px auto;background-color: aquamarine;display: block;}</style><script src="jquery.min.js"></script><script src="quagga.min.js" type="text/javascript"></script>
</head>
<body>
<video id="video"></video>
<canvas id="canvas" style="display: none;"></canvas><section id="container" class="container"><div class="controls"><fieldset class="input-group"><input type="file" accept="image/*;capture=camera"><button>检测</button></fieldset></div><div id="result_strip"><ul class="thumbnails"></ul></div>
</section><script>var video = document.getElementById('video');var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var mediaStreamTrack = null;if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia({video: {width: 1000, height: 1000}}).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia({video: {width: 1000, height: 1000}}, success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia({video: {width: 1000, height: 1000}}, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia({video: {width: 1000, height: 1000}}, success, error);}function success(stream) {//兼容webkit核心浏览器// let CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源console.log(stream);//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}function error(error) {console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);}function getFace() {context.drawImage(video, 0, 0, 300, 150);this.img = canvas.toDataURL('image/jpg')//获取完整的base64编码// this.img = img.split(',')[1];// console.log(this.img)return this.img;}//将base64转换为文件function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});}function Facelogin() {img = getFace();let input = dataURLtoFile(img, "1.jpg");console.log(input)console.log(1)Quagga.decodeSingle({inputStream: {size: 800},locator: {patchSize: "medium",halfSample: false},numOfWorkers: 1,decoder: {readers: [{format: "ean_reader",config: {}}]},locate: true,src: URL.createObjectURL(input)}, function (result) {var code = result.codeResult.code,$node,canvas = Quagga.canvas.dom.image;$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');$node.find("img").attr("src", canvas.toDataURL());$node.find("h4.code").html(code);console.log(code)$("#result_strip ul.thumbnails").prepend($node);});}setInterval(Facelogin, 2000);
</script><script>$(function () {$(".controls button").on("click", function (e) {var input = document.querySelector(".controls input[type=file]");console.log(input.files[0])if (input.files && input.files.length) {Quagga.decodeSingle({inputStream: {size: 800},locator: {patchSize: "medium",halfSample: false},numOfWorkers: 1,decoder: {readers: [{format: "ean_reader",config: {}}]},locate: true,src: URL.createObjectURL(input.files[0])}, function (result) {var code = result.codeResult.code,$node,canvas = Quagga.canvas.dom.image;$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');$node.find("img").attr("src", canvas.toDataURL());$node.find("h4.code").html(code);console.log(code)$("#result_strip ul.thumbnails").prepend($node);});}});});
</script>
</body>
</html>前端实时识别条形码 quagga.js相关推荐
- 【Vue】前端人脸识别框架 tracking.js 活体检测/拍照在 vue2 的使用
Tracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据.跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来 ...
- js上传图片 识别条形码
js识别条形码 对图片要求较高,有时候可能会识别不到!<script src="js/quagga.js"></script>quagga.js下载地址ht ...
- Quagga.js条形码识别的调用过程
断断续续花了半个月测试Quagga.js,把测试过程中的一些记录分享到这里来,给有需要的人. Quagga.js这个库有些过人之处,它可以识别倾斜的条码,但是对图片的要求还是比较苛刻,实际运用中图片很 ...
- html5 js(Javascript-Barcode-Reader)实现上传图片或拍照识别条形码的功能
废话不多说,先描述一下场景:本案例是通过图片上传或者拍照上传来识别出图片上条形码的内容. 调研发现目前 识别条形码推荐最多的两个js库分别是 quagga.js 和 barcode-reader ...
- h5使用vue+quagga识别条形码图片
最近有一个需求,要求扫描识别条形码,研究了各种方法,最后选定了拍照上传图片,然后使用quagga识别这一方案 使用demo: 拍照上传图片这里尝试了两种方法,一种是原生的input实现,一种是使用了v ...
- h5 实现扫码二维码及条形码（js多种实现方式）
方式一. 只识别二维码 实现方式一 jsQR 个人预览页面网址只扫码二维码 GitHub jsQR inde.html <!DOCTYPE html> <html><he ...
- Quagga.js库
Quagga.js Quagga.js库主要用于扫描条形码,不多说废话,直接进入主题- 我们可以通过npm安装或者CDN的方式来使用Quagga. 本文章使用CDN的方式引入Quagga.js < ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- python websocket django vue_Django资料 Vue实现网页前端实时反馈输出信息
Django资料 Vue实现网页前端实时反馈输出信息 前言 功能实现:网也点击任务,页面实时返回执行的信息 本次的任务是执行本地的一个sh脚本 这个sh脚本就是每隔1S,输出一段文字 如果需要远程可以 ...
最新文章
- 集成 Kendo UI for Angular 2 控件
- flask 基础 宏的使用
- nodejs服务端MVC架构介绍
- 实验9：Problem D: 从点到面
- 聚类算法之DBScan(Java实现)[转]
- 绘制条形图python_小白学Python（13）——pyecharts 绘制 柱状图/条形图 Bar
- MRTG在Windows平台的安装及使用
- hive insert into values 没反应_再遇死锁insert语句导致的死锁
- Activemq Jms 简单示例
- python比较数据工具_Python模拟数据工具哪些比较好用
- C#基础2：简单乘法表
- mysql基础之mariadb集群主从架构
- 68张微信表情包png
- [国家集训队]矩阵乘法 整体二分
- R语言epiDisplay包的tableStack函数基于分组变量生成统计分析表（包含描述性统计分析、假设检验、不同数据使用不同的统计量和假设检验方法）、自定义设置iqr参数指定需要计算分位数的变量
- 苹果4s怎么越狱教程_苹果iOS 11.4-11.4.1越狱发布：附越狱教程
- JMF环境配置（Eclipse）
- 基于Java技术的Web环境下分布式数据库互操作性的实现
- 计算机学士学位英文翻译,各类学士、硕士和博士学位英文翻译及缩写
- Unable to locate appropriate constructor on class