DekGenius.com
PYTHON
qr detector
import cv2
decoder = cv2.QRCodeDetector()
data, points, _ = decoder.detectAndDecode(img) # size 250 * 250 np.array
qr_code = data
print('Decoded data: ' + data)
if points is not None:
print('Decoded data: ' + data)
points = points[0]
for i in range(len(points)):
pt1 = [int(val) for val in points[i]]
pt2 = [int(val) for val in points[(i + 1) % 4]]
cv2.line(img, pt1, pt2, color=(255, 0, 0), thickness=3)
cv2.imshow('Detected QR code', img)
QR CODE
let scanner = new Instascan.Scanner({
video: document.getElementById('preview'),
mirror: false
});
Instascan.Camera.getCameras().then(function(cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
alert('No cameras found.');
}
}).catch(function(e) {
console.error(e);
alert(e);
});
$(function() {
const re = /(d+-d+)s+(.*)/;
scanner.addListener('scan', function(content) {
console.log(content);
if (!re.test(content)) {
console.log("malformed strings")
return;
}
const [_, id, name] = content.match(re);
$(".idnum").val(id);
$(".idname").val(name.trim());
});
})
qr code sccanner
<!DOCTYPE html>
<html lang="en">
<head>
<title>QR-Code Generator</title>
<style>
* {
margin: 0px;
padding: 0px;
font-family: monospace, Arial, sans-serif;
}
h1 {
text-align: center;
text-shadow: 2px 2px 0px rgba(255,255,255,.7), 5px 7px 0px rgba(0, 0, 0, 0.1); font-size:50px; margin-top:40px; color:#fff;
}
input[type=text] {
width: 90%;
padding: 12px 20px;
margin: 8px 26px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size:16px;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 26px;
border: none;
cursor: pointer;
width: 90%;
font-size:20px;
}
button:hover {
opacity: 0.8;
}
</style>
<!--Jquery 3.2.1-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body background="../background1.png">
<h1>QR-Code Generator</h1>
<div id="form-wrapper" style="width:46%; float:left; border:5px solid rgba(255,255,255,0.6); margin-top:20px; padding:10px">
<form id="generator">
<label for="codeSize" style="font-size:20px; margin-right:20px; color:#fff;">Select QR Size:</label>
<select id="codeSize" name="codeSize" style="width:260px; height:40px; ">
<option value="75">Mini</option>
<option value="155">Small</option>
<option value="186">Medium</option>
<option value="248" selected="selected">Large</option>
<option value="300">XL</option>
<option value="450">XXL</option>
</select>
<input type="text" onclick="myFunction()" id="codeData" name="codeData" size="50" placeholder="Enter a url or text" style="margin-top:20px" autocomplete="off"/ >
<br>
<button id="generate">generate</button>
</form>
<div id="alert" style="height:20px; text-align:center; margin:10px auto"></div>
</div>
<div style="float:right;">
<div id="image" style="margin:auto">Image will show here</div>
<div id="link" style="margin-top:10px; text-align:center"></div>
</div>
<div id="code" style="float:left; width:100%; height:20px; text-align:center; margin-top:10px"></div>
<script>
function myFunction() {
document.getElementById("alert").innerHTML = "";
}
$("#generate").on("click", function () {
var data = $("#codeData").val();
var size = $("#codeSize").val();
if(data == "") {
$("#alert").append("<p style='color:#fff;font-size:20px'>Please Enter A Url Or Text</p>"); // If Input Is Blank
return false;
} else {
if( $("#image").is(':empty')) {
//QR Code Image
$("#image").append("<img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' />");
//This Provide An Image Download Link
$("#link").append("<a style='color:#fff;' href='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "'>Download QR Code</a>");
//This Provide the Image Link Path In Text
$("#code").append("<p style='color:#fff;'><strong>Image Link:</strong> http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "</p>");
return false;
} else {
$("#image").html("");
$("#link").html("");
$("#code").html("");
//QR Code Image
$("#image").append("<img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' />");
//This Provide An Image Download Link
$("#link").append("<a style='color:#fff;' href='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "'>Download QR Code</a>");
//This Provide the Image Link Path In Text
$("#code").append("<p style='color:#fff;'><strong>Image Link:</strong> http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "</p>");
return false;
}
}
});
</script>
</body>
</html>
QR code
<img src="data:image/png;base64, {{ base64_encode(QrCode::format('png')->size(100)->generate('Make me into an QrCode!')) }} ">
qr code generator online
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="shortcut icon" href="QR-CODE.png" type="image/x-icon">
<meta charset="utf-8">
<title>QR Code Generator | Clever Shivanshu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
background: #EFEBFA;
justify-content: center;
}
.wrapper{
height: 265px;
max-width: 410px;
background: #fff;
border-radius: 7px;
padding: 20px 25px 0;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
height: 530px;
}
header h1{
font-size: 21px;
font-weight: 500;
}
header p{
margin-top: 5px;
color: #575757;
font-size: 16px;
}
.wrapper .form{
margin: 20px 0 25px;
}
.form :where(input, button){
width: 100%;
height: 55px;
border: none;
outline: none;
border-radius: 5px;
transition: 0.1s ease;
}
.form input{
font-size: 18px;
padding: 0 17px;
border: 1px solid #999;
}
.form input:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
color: #999;
}
.form button{
color: #fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background: linear-gradient(135deg, #481CB6 0%, #2D5CFE 100%);
}
.qr-code{
opacity: 0;
display: flex;
padding: 33px 0;
border-radius: 5px;
align-items: center;
pointer-events: none;
justify-content: center;
border: 1px solid #ccc;
}
.wrapper.active .qr-code{
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
width: 170px;
}
@media (max-width: 430px){
.wrapper{
height: 255px;
padding: 16px 20px;
}
.wrapper.active{
height: 510px;
}
header p{
color: #696969;
}
.form :where(input, button){
height: 52px;
}
.qr-code img{
width: 160px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR code</p>
</header>
<div class="form">
<input type="text" spellcheck="false" placeholder="Enter text or url">
<button>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code">
</div>
</div>
<script>
const wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input"),
generateBtn = wrapper.querySelector(".form button"),
qrImg = wrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
let qrValue = qrInput.value.trim();
if(!qrValue || preValue === qrValue) return;
preValue = qrValue;
generateBtn.innerText = "Generating QR Code...";
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
qrImg.addEventListener("load", () => {
wrapper.classList.add("active");
generateBtn.innerText = "Generate QR Code";
});
});
qrInput.addEventListener("keyup", () => {
if(!qrInput.value.trim()) {
wrapper.classList.remove("active");
preValue = "";
}
});
</script>
</body>
</html>
QR CODE
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<label id="label">Account ID </label>
<input type="text" name="accId" required="" class="idnum" style="width: 108px;margin-right: 15px;" value="">
<br/>
<label id="label">Customer Name </label>
<br/>
<input type="text" readonly="" name="name" class="idname" required="" value="">
© 2022 Copyright:
DekGenius.com