移动端H5(JavaScript)识别二维码功能 |
您所在的位置：网站首页 › 扫一扫这个功能使用了什么识别 › 移动端H5(JavaScript)识别二维码功能 |
|
前言 时隔一年多， 再次接触到H5识别二维码功能，这次直接写个demo方便大家学习和使用。(其实是方便自己抄自己代码…)。 直接上代码 QRcode下载地址 长的好看的都点⭐了！！！ Document .click_btn { padding: 10px 20px; color: #ffffff; background: #777CE3; border-radius: 8px; cursor: pointer; } 点击识别二维码 // 点击识别二维码 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 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) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |