Qrode

qrcode.js 可用于识别二维码，生成二维码。
下载地址
本文源码

Qrode 基本使用

生成二维码

<div id="qrcode"></div>
<script type="text/JavaScript">
new QRCode(document.getElementById("qrcode"), "这是一个二维码");  // 设置要生成二维码的链接
</script>

解析二维码

qrcode.decode(imgSrc);
qrcode.callback = function(imgMsg){console.log("imgMsg",imgMsg);
}

Html使用

由 qrcode.decode(imgSrc) 可知参数imgSrc是图片的路径。可使用input 取得图片的路径

   <div> 选择文件 <input  type="file" id="inputFile" /> </div>

监听input 的change 事件，使得选取图片之后，在执行识别二维码。事件中还可判断文件是否是图片类型文件。
简单代码（未判断是否是图片类型文件）

   $('#inputFile').on('change',function(){let inputFile =   $(this)console.log('inputFile:', inputFile)// console.log('inputFile:', getObjectURL(inputFile[0]))let reader = new FileReader();                reader.readAsDataURL(inputFile[0].files[0]);reader.onload = function (e) {let urlData = this.result;// console.log('reader:', urlData)qrcode.decode(urlData);qrcode.callback = function(imgMsg){console.log("imgMsg",imgMsg);}}})

参考

H5使用qrcode实现扫码相关推荐

解决uniapp在H5端使用不能扫码问题
前言 uniapp自带的扫码功能在H5端不能使用已踩坑,下面是解决方案,利用调用手机自带的相机和相册来进行扫码提示:以下是本篇文章正文内容,下面案例可供参考一.解决uniapp在H5端使用不能扫码 ...
H5调用微信原生扫码能力（uniapp版本）
技术背景在uniapp打包成H5的过程中发现,uniapp提供的uni.scanCode扫码api不支持H5.不过微信原生的扫描真是又好用又方便,那有没有办法在h5下还能继续使用呢.答案是肯定的,方 ...
微信支付(小程序，H5,公众号，扫码,App)
一.支付模式微信提供付款码支付.Native支付.JSAPI支付.APP支付.H5支付.小程序支付.刷脸支付共7种支付模式,其中Native支付是指生成支付二维码扫码支付,JSAPI支付是用户在微信 ...
微信H5支付(MWEB)、扫码支付(NATIVE)、APP支付(APP)
1.下单方法 @ResponseBody@ApiOperation("微信浏支付/(H5)")@ApiImplicitParams({@ApiImplicitParam(name ...
h5支付 jsapi支付扫码支付(场景二)
配置文件 function config(){$url = "https://api.mch.weixin.qq.com/pay/unifiedorder"; // 支付接口$ke ...
前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.
小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数属性类型默认值必填说明最低版本 onlyFromCamera boolean false 否是否只 ...
H5移动端网页自定义扫码
最近遇到个需求,需要做H5网页版的扫码总结了一下版本 vue或uni的可以使用"@zxing/library": "^0.18.6", 其他的可以使用html ...
vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式
扫码需求准备工作希望在h5端直接使用扫码调用js库使用框架 vue 或者 uniapp yarn add @zxing/library 这里我使用的版本是 ^0.19.1 可以直接带上版本号下 ...
html 5 调用手机条码扫描,vue h5页面如何实现扫一扫功能，扫条形码获取编码
如图这是我在网上找的一个方法,使用h5的Barcode实现扫码的功能,但代码报错 'plus' is not defined ,是什么原因呢?,现在在手机上真机测试点击扫描也没反应,没调取摄像头,有老 ...

H5使用qrcode实现扫码

Qrode

Qrode 基本使用

Html使用

H5使用qrcode实现扫码相关推荐

最新文章

热门文章