设置H5打开文章内的二维码不能识别,只可选中下载bug

.img_box img{
width: 100%;
height: auto;
display: block;
-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;
-webkit-touch-callout: none;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在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中实现安卓系统二维码识别的两种方案,开发者可以根据自己的实际需求来选择其中的一种进行使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值