1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > asp.net MVC使用 jsQR 扫描二维码

asp.net MVC使用 jsQR 扫描二维码

时间:2023-12-21 02:12:16

相关推荐

asp.net MVC使用 jsQR 扫描二维码

jsQR是一个js 插件 , 只用前台代码就可以识别出二维码的内容。

下面的例子是复制官网例子写出来的,官网是(有时候github上不了,下载靠运气):

例子https://cozmo.github.io/jsQR/代码/cozmo/jsQR

运行的效果如图

以下是 MVC项目,首先建立一个mvc项目,最好是用带有摄像头的笔记本电脑来开发测试,页面要调用摄像头。然后在homeControl里面加入一个视图

public ActionResult ScamQR(){return View();}

并且在scripts文件夹里面加入刚刚下载下来的 jsQR.js 文件。

然后编辑ScamQR View (html 和 js脚步)

@*Scam page*@@{Layout = null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>ScamQR</title><script src="~/Scripts/jsQR.js"></script><style>body {font-family: 'Ropa Sans', sans-serif;color: #333;max-width: 640px;margin: 0 auto;position: relative;}#githubLink {position: absolute;right: 0;top: 12px;color: #2D99FF;}h1 {margin: 10px 0;font-size: 40px;}#loadingMessage {text-align: center;padding: 40px;background-color: #eee;}#canvas {width: 100%;}#output {margin-top: 20px;background: #eee;padding: 10px;padding-bottom: 0;}#output div {padding-bottom: 10px;word-wrap: break-word;}#noQRFound {text-align: center;}</style></head><body><div></div><h5>jsQR Scam</h5><div id="loadingMessage">Unable to access video stream (please make sure you have a webcam enabled)</div><canvas id="canvas" hidden></canvas><div id="output" hidden><div id="outputMessage">No QR code detected</div><div hidden><b>Data:</b> <span id="outputData"></span></div></div><script type="text/javascript">var video = document.createElement("video");var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");var loadingMessage = document.getElementById("loadingMessage");var outputContainer = document.getElementById("output");var outputMessage = document.getElementById("outputMessage");var outputData = document.getElementById("outputData");function drawLine(begin, end, color) {canvas.beginPath();canvas.moveTo(begin.x, begin.y);canvas.lineTo(end.x, end.y);canvas.lineWidth = 4;canvas.strokeStyle = color;canvas.stroke();}// Use facingMode: environment to attemt to get the front camera on phonesnavigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function (stream) {video.srcObject = stream;video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreenvideo.play();requestAnimationFrame(tick);});function tick() {loadingMessage.innerText = "Loading video..."if (video.readyState === video.HAVE_ENOUGH_DATA) {loadingMessage.hidden = true;canvasElement.hidden = false;outputContainer.hidden = false;canvasElement.height = video.videoHeight;canvasElement.width = video.videoWidth;canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);var code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: "dontInvert",});if (code) {drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");outputMessage.hidden = true;outputData.parentElement.hidden = false;outputData.innerText = code.data;//my code (goto new page)//window.location.href = "/home/editRes?qr=" + code.data;} else {outputMessage.hidden = false;outputData.parentElement.hidden = true;}}requestAnimationFrame(tick);}</script></body></html>

这样就做好了,只需前台代码,很方便好用。

备注:发布网站的时候,需要用https协议。由于手机打开摄像头需要安全连接,所以是https

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。