xxxxxxxxxx
"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=MrBeanDev"
// this is the best qr code instant generator , this url directly output the qrcode image
xxxxxxxxxx
#Install qrcode module -> pip install qrcode
import qrcode as qr
img= qr.make("https://rafiulislamrohan.github.io/rafiulislam")
img.save("Rafiul_Islam.png")
node-qrcode generator
xxxxxxxxxx
npm install -g qrcode
Works on server and client (and react native with svg), allows you Save QR code as image.
xxxxxxxxxx
<!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>
xxxxxxxxxx
<!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>
xxxxxxxxxx
<img src="data:image/png;base64, {{ base64_encode(QrCode::format('png')->size(100)->generate('Make me into an QrCode!')) }} ">
xxxxxxxxxx
<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="">
xxxxxxxxxx
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());
});
})