mirror of
https://github.com/tmaier/asn-qr-code-label-generator.git
synced 2026-03-14 16:43:31 +00:00
Generate QR codes locally
This commit is contained in:
parent
d18719cc26
commit
e772c32205
1 changed files with 5 additions and 12 deletions
17
index.html
17
index.html
|
|
@ -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() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue