H5从相册选取二维码图片识别二维码

本文介绍如何在H5中通过调用相册选取二维码图片,并进行识别的技术实现,包括关键步骤和源码路径。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-pro</title>
    <script src="jquery.min.js"></script>
    <script src="reqrcode.js"></script>
</head>

<body>
<input type="file" id="newfile">
</body>

<script>
    var newfile = document.getElementById('newfile')
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Vue H5中,如果要在安卓系统上识别二维码,可以使用第三方库进行实现。其中比较常用的库有两个,分别是QuaggaJS和zxing。下面分别对这两个库进行简单介绍: 1. QuaggaJS QuaggaJS是一个用于条形码和二维码扫描的JavaScript库,可以实现跨平台的条形码和二维码扫描功能。具体使用可以按照以下步骤进行: 1)使用npm安装quagga库:npm install quagga 2)引入quagga: import Quagga from 'quagga'; 3)在mounted生命周期钩子函数中初始化Quagga: mounted() { Quagga.init({ inputStream : { name : "Live", type : "LiveStream", target: document.querySelector('#yourElement') }, decoder : { readers : ['ean_reader', 'ean_8_reader'] } }, function(err) { if (err) { console.log(err); return; } Quagga.start(); }); } 4)在使用时,可以在页面中设置一个元素,通过查询选择器获取到该元素,将其传入到配置中,就可以在该元素上展示识别到的二维码信息。 2. zxing zxing是一款开源的条形码和二维码识别库,使用简单,但是较QuaggaJS略显复杂,需要按以下步骤进行设置: 1)使用npm安装zxing库:npm install zxing 2)引入zxing: import zxing from 'zxing'; 3)新建一个单例的扫描器对象: const scanner = new zxing.BrowserQRCodeReader(); 4)在使用时,可以通过调用扫描器对象的方法,获取到扫描后的结果。具体使用可以参考下面的代码样例: startScan() { scanner.getVideoInputDevices() .then((video) => { console.log("videoInputDevices", video); return scanner.decodeFromVideoDevice(video[0].deviceId, 'video'); }) .then((result) => { console.log(result); }) .catch((err) => { console.error(err); }) } 综上所述,以上是在Vue H5中实现安卓系统二维码识别的两种方案,开发者可以根据自己的实际需求来选择其中的一种进行使用。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值