最近做一个手机端识别二维码的功能, 百度了一下,看到很多文章说 js qrcode 等等的工具可以帮忙解析二维码图片, 我这里用到的js 库有:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
你可以先把js下载到自己本地磁盘,也可以通过cdn网络提供脚本文件。
本人菜鸟,写的不对,请见谅。
首先我们可以到 https://cozmo.github.io/jsQR 这个网站里面看看一个带有摄像头扫码二维码的网页例子 , 这个也是我项目中需要做的的样子。我用的浏览器是谷歌或者最新的edge浏览器。
打开visual studio 建立一个普通的asp.net mvc网站 , 在HomeController 里面改造一下 Index 视图。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SaoMaTest1.Controllers
{
public class HomeController : Controller
{
//识别二维码例子
public ActionResult Index()
{
return View();
}
}
}
前端html页面代码如下
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<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" />
<div>
<h2>识别结果:</h2>
<ul id="result"></ul>
</div>
<script type="text/javascript">
$("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>');
$("#pictureChange").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) {
showCode(code.data)
} else {
alert("识别错误")
}
};
}
function showCode(code) {
$("#result").append("<li>" + code + "</li>")
}
</script>
</body>
</html>
代码写到这里就可以运行来看看了。
代码思路:
首先html里面需要有一个 画布标签 <canvas> 和 上传按钮 <input type=file>
上传按钮选择好了二维码的图片只好 , 画布获取图片 drawImage(img, 0, 0, width, height) ;
<canvas> 得到图片之后,使用 script/jsQR.js 库提供的 function jsQR()来解析二维码图片,从而得到解析字符串。