qr-code 相关问题

我想进行输入，在使用网络摄像头或手机摄像头扫描二维码或条形码扫描仪后可以自动填写。对于剧本我想象了这样的事情我想进行一个输入，在使用网络摄像头或手机摄像头扫描 QR 或条形码扫描仪后可以自动填写。对于剧本我想象的是这样的 <video autoplay = "true" id = "video-webcam"> </video> <input type = "text" id = "scanresult"> <script> external or internal script for scan qr or barcode. save result in variable = result html DOM getElementById ('scanresult'). value (result); </script> 我希望任何人都可以针对我的问题向我提供建议或反馈。谢谢你在此之前感谢 JaromandaX，我找到了使用网络摄像头在 Html5 上进行条形码扫描仪的脚本。这是我的index.html <!DOCTYPE html> <html> <head> <title>QR Code Scanner</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="style.css" /> <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script> </head> <body> <div id="container"> <h1>QR Code Scanner</h1> <a id="btn-scan-qr"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg"> <a/> <canvas hidden="" id="qr-canvas"></canvas> <div id="qr-result" hidden=""> <b>Data:</b> <span id="outputData"></span> </div> </div> <script src="qrCodeScanner.js"></script> </body> </html> qsCodeScanner.js //const qrcode = window.qrcode; const video = document.createElement("video"); const canvasElement = document.getElementById("qr-canvas"); const canvas = canvasElement.getContext("2d"); const qrResult = document.getElementById("qr-result"); const outputData = document.getElementById("outputData"); const btnScanQR = document.getElementById("btn-scan-qr"); let scanning = false; qrcode.callback = res => { if (res) { outputData.innerText = res; scanning = false; video.srcObject.getTracks().forEach(track => { track.stop(); }); qrResult.hidden = false; canvasElement.hidden = true; btnScanQR.hidden = false; } }; btnScanQR.onclick = () => { navigator.mediaDevices .getUserMedia({ video: { facingMode: "environment" } }) .then(function(stream) { scanning = true; qrResult.hidden = true; btnScanQR.hidden = true; canvasElement.hidden = false; video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen video.srcObject = stream; video.play(); tick(); scan(); }); }; function tick() { canvasElement.height = video.videoHeight; canvasElement.width = video.videoWidth; canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); scanning && requestAnimationFrame(tick); } function scan() { try { qrcode.decode(); } catch (e) { setTimeout(scan, 300); } } 样式.css html { height: 100%; } body { font-family: sans-serif; padding: 0 10px; height: 100%; background: black; margin: 0; } h1 { color: white; margin: 0; padding: 15px; } #container { text-align: center; margin: 0; } #qr-canvas { margin: auto; width: calc(100% - 20px); max-width: 400px; } #btn-scan-qr { cursor: pointer; } #btn-scan-qr img { height: 10em; padding: 15px; margin: 15px; background: white; } #qr-result { font-size: 1.2em; margin: 20px auto; padding: 20px; max-width: 700px; background-color: white; } 有很多更好的库可以做到这一点，但我个人推荐QrScanner，因为它简单且直观。你的实时二维码扫描仪会是这样的...... 扫描仪.html <div id="holder"> <h3>Scan QR Code from Camera</h3> <div class="make"> <video id="scan"></video> </div> <div> <input type = "text" id = "scanresult"><br> <button id="start">Start</button> <button id="stop">Stop</button> </div> </div> 然后添加一点CSS：样式.css #holder{ width: 30%; margin:auto; } #holder .make { width: 99%; height: 30vh; margin-bottom: 15px; text-align: center; } video { width: 99%; margin:auto; } 然后添加您的 QrScanner 代码： <script type="module"> import QrScanner from "/path/to/qr-scanner.min.js"; QrScanner.WORKER_PATH = "/path/to/qr-scanner-worker.min.js"; // Scanner Object const scanner = new QrScanner( document.getElementById("scan"), function(result){ document.getElementById("scanresult").value = result; } ); document.getElementById("start").onclick = e => scanner.start(); document.getElementById("stop").onclick = e => scanner.stop(); </script> 然后连接相机并单击开始按钮...

javascript html5-video qr-code webcam barcode-scanner

回答 2 投票 0

使用“Simple QrCode”包生成的二维码无法正确显示？

我使用了“Simple QrCode”包来生成“QR Code”。按照说明进行操作 https://www.positronx.io/how-to-generate-various-qr-codes-in-laravel-application/ 我想在 QR 内生成徽标

laravel-8 qr-code laravel-7 generated-code laravel-package

回答 1 投票 0

如何在JS中解码本地图片文件（.png）中的二维码？

我正在尝试创建一个 Cypress 测试来解码网页/pdf 中的 QR 码。我设法使用 cy.screenshot() 截取屏幕截图，但我找不到从 QR i 中提取信息的方法...

javascript automation png cypress qr-code

回答 1 投票 0

如何使用谷歌图表API在QR码中插入图像？

我正在使用谷歌图表API生成QR码，如何在Image中插入图像。我现在得到的二维码是，在此输入图像描述我想要什么二维码，在此输入图像描述可以