- allow to paste qr code images from the clipboard

Author: TobiasMue91

tools/online_qr_code_reader.html

@@ -99,6 +99,11 @@ <h1>Online QR Code Reader</h1>
         </div>
         <div class="error" id="file-error"></div>
       </div>
+      <div class="form-group">
+        <label for="paste-qr">Paste QR Code:</label>
+        <button type="button" class="btn" id="paste-btn">Paste from Clipboard</button>
+        <div class="error" id="paste-error"></div>
+      </div>
       <div class="form-group">
         <div class="decoded-info" id="decoded-info"></div>
         <button type="button" class="copy-btn" id="copy-btn">Copy</button>
@@ -206,6 +211,44 @@ <h1>Online QR Code Reader</h1>
         qrImage.src = '#';
         $('#qr-file').val('');
       });
+
+      // Paste from clipboard
+      const pasteBtn = document.getElementById('paste-btn');
+      const pasteError = document.getElementById('paste-error');
+
+      pasteBtn.addEventListener('click', async function() {
+        try {
+          const clipboardItems = await navigator.clipboard.read();
+          for (const clipboardItem of clipboardItems) {
+            for (const type of clipboardItem.types) {
+              if (type.startsWith('image/')) {
+                const blob = await clipboardItem.getType(type);
+                const imageUrl = URL.createObjectURL(blob);
+                qrImage.src = imageUrl;
+                qrImage.onload = function() {
+                  codeReader.decodeFromImage(qrImage).then(code => {
+                    if (code) {
+                      decodedInfo.textContent = code.text;
+                      copyBtn.disabled = false;
+                      pasteError.textContent = '';
+                    } else {
+                      pasteError.textContent = 'Error decoding QR code';
+                    }
+                  }).catch(err => {
+                    console.error(err);
+                    pasteError.textContent = 'Error decoding QR code';
+                  });
+                };
+                return;
+              }
+            }
+          }
+          pasteError.textContent = 'No image found in clipboard';
+        } catch (err) {
+          console.error(err);
+          pasteError.textContent = 'Error accessing clipboard';
+        }
+      });
     });
   </script>
 </body>