Merge 8180c12941 into 69e164eee6

index.html

@@ -8,6 +8,7 @@
       rel="canonical"
       href="https://tobiasmaier.info/asn-qr-code-label-generator/"
     />
+    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
@@ -209,13 +210,9 @@
               :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
             >
               <img
-                :src="label.qrCodeUrl"
+                x-effect="generateQrCode($el, label.text);"
-                alt=""
-                width="100"
-                height="100"
                 class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
-                referrerpolicy="no-referrer"
+              ></img>
-              />
               <div
                 class="flex-grow"
                 :class="{
@@ -303,14 +300,13 @@
                 .toString()
                 .padStart(leadingZerosInt + 1, "0");
               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 });
             }
           },
+          generateQrCode(element, value) {
+            new QRious({ element, value });
+          },
           printLabels() {
             window.print();
           },