移动端H5(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) { // basicurl = window.createObjectURL(file);} else if (window.URL !== undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL !== undefined) { // webkit or chromeurl = 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:// 0xxxxxxxout += str.charAt(i - 1);break;case 12:case 13:// 110x xxxx 10xx xxxxchar2 = str.charCodeAt(i++);out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));break;case 14:// 1110 xxxx 10xx xxxx 10xx xxxxchar2 = 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 扫码扫一扫功能

移动端H5(JavaScript)识别二维码功能相关推荐

微信小程序如何支持长按识别二维码功能
1.previewImage 小程序wxml <image src="{{image}}" bindtap="imgLoad"></image ...
微信小程序识别二维码功能
在微信8.0版本之前可以使用: 微信小程序里长按识别二维码此文章中的方法实现小程序中识别二维码. 微信8.0及以后的版本中不再支持此功能: 只支持如下描述: web-view组件内嵌普通H5只支持识 ...
如何使用h5-scan-qrcode插件实现一个h5页面扫码识别二维码功能
为了适应公司代码全程使用jquery构造如需其他js或者vue 可根据此代码去改(因为好多地方会用到这个东西所以我封装成了一个js文件) https://dragonir.github.io/h5- ...
react APP内置移动端h5 canvas画布二维码转成base64链接
有这么一个需求,保存图片到手机相册,真正的保存是调用的sdk原生的接口,这个不是我想讲的重点我想说的是,如何使用qrcode.react 生成二维码之后再将以canvas画布形式渲染的二维码转成ba ...
jQuery实现生成二维码，微信长按识别二维码功能
参考:https://blog.csdn.net/wky9421/article/details/52837983 <html> <head><script src=&q ...
移动端（ios and android）长按识别二维码（含js与原生互调）
这篇文章就整理下移动端长按识别二维码的实现吧!实现方式可以分为三种一.长按原生控件,直接获取控件中的图片数据(src或background) 二.长按原生控件,截图识别三.长按web中的图片,ap ...
H5页面长按识别二维码
vue 写的H5 ,内嵌在小程序上 <img src="图片路径" style="width: 200px;background-size:100% 100%;he ...
android扫码二维码识别二维码
1. 快速集成扫码二维码,识别二维码功能.经过加工处理优化的,直接返回扫码结果字符串和图片的bitmap数据. 直接上代码: package com.xinxinchelian.myscanzxing ...
H5移动版识别二维码和条形码
H5移动版识别二维码和条形码(PC和移动端都兼容) 一.需要引入JS文件 <script src="https://www.jq22.com/jquery/jquery-1.10.2. ...

移动端H5(JavaScript)识别二维码功能

移动端H5(JavaScript)识别二维码功能相关推荐

最新文章

热门文章