You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
4.7 KiB
90 lines
4.7 KiB
<!doctype html>
|
|
<head>
|
|
<link rel="stylesheet" href="css/style.v0.css">
|
|
<link rel="shortcut icon" href="https://www.pathcheck.org/hubfs/Favicon.png">
|
|
<title>QR Code Generator</title>
|
|
</head>
|
|
<body>
|
|
<div class="center">
|
|
<h3>QR Code Generator</h3>
|
|
<div class="full-div">
|
|
<h4>Message to Include</h4>
|
|
<div class="left-div">
|
|
<textarea id="text-qr1" rows="10" style="width:100%;">jxt:example.com:w3vc:1:MoH/J07BX03/1183738569/OPL/NZ/BgLv0g/Bwtkpo/SMITH/Male/JOHN/urn%3Auvci%3Aaf5vshde843jf831j128fj/Bd5lLo/eyJhbGciOiJFZERTQSIsImI2NCI6ZmFsc2UsImNyaXQiOlsiYjY0Il19..a3UqIuKSOmCKrdn2knl_hCjiN4f4Ud1eO5ckwEHb623V9vdCwWCDB7GBHlRBYSI8ek2E-By7xysVFwutcpOeDg</textarea>
|
|
</div>
|
|
<div class="right-div">
|
|
<textarea id="text-qr2" rows="10" style="width:100%;">JXT:EXAMPLE.COM:W3VC:1:MOH/J07BX03/1183738569/OPL/NZ/BGLV0G/BWTKPO/SMITH/MALE/JOHN/XK465POITJ7ZX3EF266OG6G76N6WHV3PD6H7AXPGKLUP33EJQWYZZCHIREKZCEKNASELBCMI3DIIR2MZQWY43FFQRGG4TJOQRDUWZCMI3DIIS5PVVXKKRC4KJDUYEKVXM7NETZMEFDRDPB7YKHOV4O4XETAEDW7LNXK7N52CYFQIGB5RQEPFIQLBEI6HUTMEA4XPDSWFIXBOWXFE46BQ</textarea>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="full-div">
|
|
<br/><br/>
|
|
<div class="center">
|
|
<button class="qr-btn center-in-div" onclick="generateQRCode()">Generate QR</button>
|
|
<br/><br/>
|
|
<div class="left-div">
|
|
<canvas id="qr-code1"></canvas><br/>
|
|
<pre id="qr-code1-url"></pre>
|
|
<pre id="qr-code1-bytes"></pre>
|
|
<pre id="qr-code1-mode"></pre>
|
|
<pre id="qr-code1-error"></pre>
|
|
|
|
</div>
|
|
<div class="right-div">
|
|
<canvas id="qr-code2"></canvas><br/>
|
|
<pre id="qr-code2-url"></pre>
|
|
<pre id="qr-code2-bytes"></pre>
|
|
<pre id="qr-code2-mode"></pre>
|
|
<pre id="qr-code2-error"></pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/qrcode.min.js"></script>
|
|
<script>
|
|
function e(elem) {
|
|
return document.getElementById(elem);
|
|
}
|
|
|
|
function describe(qr) {
|
|
return qr.modules.size + "x" + qr.modules.size + " bits " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes"
|
|
}
|
|
|
|
function generateCode(elemIdSource, elemPrefix) {
|
|
let uri = e(elemIdSource).value;
|
|
let params = {margin:0, width:540, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }};
|
|
let qr = QRCode.create(uri, );
|
|
|
|
QRCode.toCanvas(e(elemPrefix), uri, params, function (error) {
|
|
e(elemPrefix + "-error").innerHTML = error;
|
|
e(elemPrefix + "-url").innerHTML = uri;
|
|
});
|
|
|
|
let qrQ = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }});
|
|
let qrH = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'H', color: {dark: '#3654DD' }});
|
|
let qrM = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }});
|
|
let qrL = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }});
|
|
|
|
e(elemPrefix+"-bytes").innerHTML += "QR Size Analysis: ";
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC L 7% " + describe(qrL);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC M 15% " + describe(qrM);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC Q 25% " + describe(qrQ);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC H 30% " + describe(qrH);
|
|
|
|
e(elemPrefix + "-mode").innerHTML = "Broken in " + qr.segments.length + " segments";
|
|
for (i=0; i<qr.segments.length; i++) {
|
|
e(elemPrefix + "-mode").innerHTML += "<br>- " + i + ": " + qr.segments[i].mode.id + " " + qr.segments[i].data;
|
|
}
|
|
//e(elemPrefix + "-bytes").innerHTML = "QR Version: " + qr.version + " with size " + qr.modules.size + "x" + qr.modules.size + " bits => " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes";
|
|
}
|
|
function generateQRCode() {
|
|
generateCode('text-qr1', "qr-code1");
|
|
generateCode('text-qr2', "qr-code2");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|