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

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

下面的例子是复制官网例子写出来的，官网是（有时候github上不了，下载靠运气）：

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

运行的效果如图

以下是asp.net 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

asp.net MVC使用 jsQR 扫描二维码相关推荐

SNF开发平台WinForm-平板拍照及扫描二维码功能
在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机这种产物 ...
PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
使用jsQR识别二维码
1.关联在<初识html5使用jsQR识别二维码>博文中我们已经初步了解jsQR识别带有QR码的图片.在现实环境中,我们常常使用手机扫码QR,那么应该怎样解决呢?? 2.解决方法我们可 ...
使用jsqr解析二维码
使用jsqr识别二维码 1.vue 使用画布 <el-form-itemlabel="设备识别码"prop="deviceSerialNo"class=& ...
H5实现手机扫描二维码识别
主要依赖于二维码解析库jsQR,它是一个纯javascript的二维码阅读库. 这个库接收原始图像,并将定位.提取和解析其中发现的任何QR码. jsQR 被设计成一个完全独立的库,用于扫描二维码.按照 ...
WebSocket实现app扫描二维码登录
后台框架采用SpringMVC,不同的框架可根据逻辑更改即可: [思路]- PC端生成二维码,二维码包含uuid(全局唯一标识符),且打通websocket通道,等待服务器返回登录成功信息:APP扫描 ...
微信小程序：实现长按扫描二维码
小程序内置扫描二维码 image 使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true <image show-menu-by ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...
Android扫描二维码实现登录网页
工程代码:ScanQRcode.zip ------------------------------------------------------------------ 1. 扫描二维码登录的实现 ...
转【微信小程序四】二维码生成／扫描二维码
原文:https://blog.csdn.net/xbw12138/article/details/75213274 前端二维码生成二维码要求:每分钟刷新一次,模拟了个鸡肋,添加了个按分钟显示 ...

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

asp.net MVC使用 jsQR 扫描二维码相关推荐

最新文章

热门文章