移动端H5(JavaScript)识别二维码功能_h5识别二维码功能-程序员宅基地
技术标签： html5 JavaScript 前端 JQuery javascript
前言
时隔一年多， 再次接触到H5识别二维码功能，这次直接写个demo方便大家学习和使用。(其实是方便自己抄自己代码…)。
直接上代码
QRcode下载地址 长的好看的都点了！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./reqrcode.js"></script>
<style>
.click_btn {
padding: 10px 20px;
color: #ffffff;
background: #777CE3;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" id="upFileDom" multiple style="display: none;" accept="image/*" onchange="dealFileData(event)" />
<span class="click_btn" onclick="clickUpFile()">点击识别二维码</span>
</body>
<script>
// 点击识别二维码
function clickUpFile() {
document.getElementById('upFileDom').click();
};
// 处理二维码信息
function dealFileData(event) {
// 解析二维码
getQCode(event.target, (res) => {
let qrInfo = decodeStr(res);
alert(qrInfo);
});
};
/**
* @description 获取文件地址
* @param {data}}
* @paramdescription
* file 文件流
*/
function getObjectURL(file) {
var url = null;
if (window.createObjectURL !== undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL !== undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url
};
/**
* @description 解析二维码
* @param {dom, fn}}
* @paramdescription
* dom 文件流 fn 回调函数
*/
function getQCode(dom, fn) {
qrcode.decode(getObjectURL(dom.files[0]));
qrcode.callback = (res) => fn(res);
};
/**
* @description 中文乱码处理
* @param {str}}
* @paramdescription
* str 传入字符
*/
function decodeStr(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
while (i < len) {
c = str.charCodeAt(i++);
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += str.charAt(i - 1);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
</script>
</html>
识别结果
这里说下 测试扫描二维码可以百度搜索 草料二维码生成器 生成完一个二维码保存到手机或者电脑上，然后点击识别二维码就完事儿了。
这里是用uniapp做的识别二维码功能 uniapp H5 扫码 扫一扫 功能
智能推荐
授权认证（IdentityServer4)-程序员宅基地
文章浏览阅读30次。IdentityServer4+Vue+asp.netcore开源项目地址区别OpenId: Authentication :认证Oauth: Aurhorize :授权输入账号密码，QQ确认输入了正确的账号密码可以登录 --->认证下面需要勾选的复选框(获取昵称、头像、性别)----->授权 OpenID当你需要访问A网站的时候,A网站要求你输入你的OpenId,...
清除浮动的几种常用的方法_li怎么消除浮动-程序员宅基地
文章浏览阅读326次。先来看设置浮动后,未清除的效果:我们给父元素设置了背景颜色,但是由于浮动,此时没有背景颜色 清除浮动 .father{ border: 1px solid red; background: #fc9; } .div1{ width: 80px; height: 80px; background: red; float: le_li怎么消除浮动
【Camera Sensor Driver笔记】三、点亮指南之Sensor DTS-程序员宅基地
文章浏览阅读433次，点赞3次，收藏7次。== camera sensor 接口配置xxsensor.cpp -> xxxsensor.soCalculateExposure 函数 pCalculateExposure函数 （平台）输入参数: pCalculateExposureData realgain ：total gain，ae算法传过来的值或者手动曝光的值 linecount：经过平台已经转换过的曝光时间 middlerealg
matlab编程勒让德多项式展开例题解析,第19 勒让德多项式 球函数习题及解答-程序员宅基地
文章浏览阅读1.3k次。第19 勒让德多项式 球函数习题及解答————————————————————————————19.1 试证明，其中.19.2计算.【答案】19.3求积分.【答案 】19.4 求积分.【答案 】19.5 证明：19.6 证明：19.7 证明：19.8 计算【答案】19.9 求球内的调和函数，使得它满足边界条件.【答案 】19.10 求下列定解问题【答案】 11P ()d 0n x x -=?1,2..._matlab编程求解勒让德多项式事例
C#学习笔记 07.01_输入值是一个class-程序员宅基地
文章浏览阅读89次。C#学习笔记 07.01（学习视频来自bilibili的传智播客赵老师基础教学视频）ref参数被 ref 修饰的参数拥有了输入输出二合一的属性，就是被这个修饰的变量，就既是方法的输入参数，又是返回参数。还是举个例子： public static void jiaoHuan(ref int a, ref int b) { int temp; temp = a; a = b; _输入值是一个class
pm2集群模式mysql配置_配置 PM2 一键部署-程序员宅基地
文章浏览阅读117次。[TOC]# 连接线上数据库~~~var env = process.env.NODE_ENV || ' development'// 格式为 mongodb://usernam:password@host:port/databasevar dbUrl = 'mongodb://root:[email protected]:27017/base'if (env === 'development') ..._pm2连接mysql
随便推点
【教程】-在rknn-toolkit2模拟器中验证测试语义分割模型Yolov5-seg_rknn inference输出-程序员宅基地
文章浏览阅读651次，点赞4次，收藏8次。为了以后能够顺利的将模型部署在rk3568开发板中，我们首先要在rknn-toolkit2提供的环境中进行运行测试，从而保证所选模型能够在开发板上进行部署，测试环境是Ubuntu20.04。训练和如何导出ONNX这里就不说了，yolov5已经是非常成熟的算法了，网上有其数不清的教程，所以这里就不重复说了。_rknn inference输出
依赖包安全漏洞扫描工具——Dependency-Check（OWASP）_jar包漏洞扫描-程序员宅基地
文章浏览阅读1k次，点赞9次，收藏10次。只介绍命令的方式，maven 插件需要授权不好用暂不做介绍。后期如果有需求再补充。点击下载即可：没梯子的用迅雷一样下载。_jar包漏洞扫描
Dart-C、Dart-Kotlin/Java/Swift/Object-C、Kotlin-C数据类型对照表_dart对应kotlin类型-程序员宅基地
文章浏览阅读418次。Dart-C、Dart-Kotlin/Java/Swift/Object-C、Kotlin-C数据类型对照表_dart对应kotlin类型
牛客选择题练习【三】（20道题）（含答案和解析）_public class teststringbuffer{ public static void -程序员宅基地
文章浏览阅读1.6k次。1.下面的程序 编译运行后，在屏幕上显示的结果是（A）public class test { public static void main(String args[]) { int x,y; x=5>>2; y=x>>>2; System.out.println(y); }}A 0B 2C 5D 80解析：右移运算符（>&..._public class teststringbuffer{ public static void main(string args[]){ int n
【源码运行打包】kkFileView 下载与安装_kkfileview下载-程序员宅基地
文章浏览阅读2.6k次，点赞4次，收藏18次。本篇博文中，我们将深入探讨如何获取和安装kkFileView软件以及如何运行源码进行打包。文章详细介绍了kkFileView的下载过程，并提供了安装指南，使我们能够轻松获取该软件服务。除此之外，文章还深入讨论了如何运行源码并进行打包，为我们提供了关于使用kkFileView的实用指导。通过文章提供的指引和步骤，我们可以更好地了解kkFileView的使用方式，并且能够按照详细的说明来下载、安装和运行源码进行打包。_kkfileview下载
模型量化与模型验证：关键技术-程序员宅基地
文章浏览阅读860次，点赞25次，收藏10次。1.背景介绍在过去的几年里，人工智能(AI)技术的发展取得了显著的进展，尤其是深度学习(Deep Learning)技术在图像、语音和自然语言处理等领域的应用。随着模型的复杂性和规模的增加，如何有效地量化和验证模型变得越来越重要。模型量化是指将训练好的深度学习模型转换为可在部署设备上运行的格式，而模型验证则是确保模型在实际应用中的性能与训练时的性能保持一致。在这篇文章中，我们将讨论模型量化...