Generate QR codes locally

This commit is contained in:
Johannes Leimer 2024-05-07 14:01:50 +02:00
parent d18719cc26
commit e772c32205

View file

@ -8,6 +8,7 @@
rel="canonical" rel="canonical"
href="https://tobiasmaier.info/asn-qr-code-label-generator/" href="https://tobiasmaier.info/asn-qr-code-label-generator/"
/> />
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script <script
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
@ -204,14 +205,10 @@
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300" class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
:class="{'even:border-transparent odd:border-transparent': !borderToggle}" :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
> >
<img <div
:src="label.qrCodeUrl" x-init="new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L})"
alt=""
width="100"
height="100"
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none" class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
referrerpolicy="no-referrer" ></div>
/>
<div <div
class="flex-grow" class="flex-grow"
:class="{ :class="{
@ -271,12 +268,8 @@
.toString() .toString()
.padStart(leadingZerosInt + 1, "0"); .padStart(leadingZerosInt + 1, "0");
let text = this.prefix + paddedNumber; let text = this.prefix + paddedNumber;
// See https://goqr.me/api/doc/create-qr-code/
let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
text
)}`;
this.labels.push({ qrCodeUrl, text }); this.labels.push({ text });
} }
}, },
printLabels() { printLabels() {