Html+js:识别多个二维码并发送链接

内容：
选择二维码图片识别，第一张图片为url ,连接地址发送二维码内容
支持识别多个二维码
支持连接接口
支持发送数据
支持展示数据
不支持手机

<!DOCTYPE html>
<html><head> <meta name="viewport" content="width=device-width" /><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title>Index</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cozmo.github.io/jsQR/jsQR.js"></script> </head> <body> <span lan_id="bc">选择图片</span> <input type="file" id="pictureChange" multiple="multiple" /> <span lan_id="bc">连接服务器</span> <input type="file" id="websocket" /> <div id="url" style="width:100px; height:10px;"></div> <div> <h2>识别结果：</h2> <ul id="result"></ul> </div>
<script type = "text/javascript">
$(function() {var url = $("#url").text();
});
$("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>');
$("#pictureChange").change(function(e) {//获取多文件上传的所有文件名var filePaths = e.target.files;//或者这样写 document.getElementById("id").files;for (var i = 0; i < filePaths.length; i++) {　　 //filePaths[i].name;if (window.FileReader) {var fr = new FileReader();fr.readAsDataURL(filePaths[i]);fr.onloadend = function(e) {var base64Data = e.target.result;base64ToqR(base64Data)}}}
});
$("#websocket").change(function(e) {var file = e.target.files[0];if (window.FileReader) {var fr = new FileReader();fr.readAsDataURL(file);fr.onloadend = function(e) {var base64Data = e.target.result;base64ToqR(base64Data)}}
});
function base64ToqR(data) {var c = document.getElementById("qrcanvas");var ctx = c.getContext("2d");var img = new Image();img.src = data;img.onload = function() {$("#qrcanvas").attr("width", img.width);$("#qrcanvas").attr("height", img.height);ctx.drawImage(img, 0, 0, img.width, img.height);var imageData = ctx.getImageData(0, 0, img.width, img.height);const code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: "dontInvert",});if (code) {send(code.data);showCode(code.data);} else {alert("识别错误")}};
}function showCode(code) {$("#result").append("<li>" + code + "</li>")
}
function send(data){var url = $("#url").text();if (url == '') {console.log('连接服务器');$("#url").html(data);} else{console.log(url);console.log('发送数据'+data);$.ajax({type: 'POST',url: url,data: {'value': data},success: function(result) {console.log(result);$("#div1").html(result);}});}
}
</script> </body>
</html>

Html+js:识别多个二维码并发送链接相关推荐

微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
js自动实现读取二维码内容
js自动实现读取二维码内容 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
QRCode.js -- 用 Javascript 生产二维码
QRCode.js是一个生成二维码的JS库.QRCode.js支持在DOM中使用跨浏览器Canvas和table标签的. QRCode.js不依赖其他JS库. 基本用法: <div id=&qu ...
JS的条形码和二维码生成
一.前言最近做项目用到了JS生成条形码和二维码,内容不多,整理一下方便使用. 2018年7月5日更新: 二维码生成时,如果长度太长会有异常: Uncaught Error: code length ...
小程序长按识别公众号二维码、个人微信号、企业微信号、微信群、-已实现
一.微信原则上不在支持小程序中长按识别在2020年微信的一次版本更新后,就不在支持在小程序中长按识别微信公众号了. 可以看到这个文章: 紧急!!! 微信8.0版本,在小程序webview内嵌公众号 ...
1分钟快速实现高效的扫描二维码，急速识别手机相册二维码
最近由于项目需求,需要在二维码扫描时添加识别相册内二维码的功能,于是,遇到了许多问题在这里总结,好为以后不在采坑. 1.二维码识别速度慢,效率低 2.手机相册内的二维码识别速度慢,识别不出来好了,主 ...
uniapp小程序中长按识别公众号二维码，企业微信二维码，个人微信二维码
长按识别公众号二维码,企业微信二维码,个人微信二维码效果图通过给image标签添加show-menu-by-longpress="true"属性,实现长按识别功能注意:二维码 ...
用不同的QR Code识别库实现二维码的识别（第一篇：opencv 和BoofCV）
最近有个项目需要实现二维码的识别和摄像头的数据采集.在开始正式项目之前,我决定用python写几行简单的代码来测试每个库的识别效果.这次没有连续测量,也没有使用多线程识别.只是简单的测试了每个二维码的 ...
批量识别条形码和二维码
依赖 <dependency><groupId>net.sf.barcode4j</groupId><artifactId>barcode4j-ligh ...

Html+js:识别多个二维码并发送链接

Html+js:识别多个二维码并发送链接相关推荐

最新文章

热门文章