Hide copy to clipboard if API is not supported on the browser

devbox.json

@@ -0,0 +1,9 @@
+{
+  "packages": ["yarn@latest", "nodejs@latest"],
+  "shell": {
+    "init_hook": ["echo 'Welcome to devbox!' > /dev/null"],
+    "scripts": {
+      "test": ["echo \"Error: no test specified\" && exit 1"]
+    }
+  }
+}

devbox.lock

@@ -0,0 +1,45 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "nodejs@latest": {
+      "last_modified": "2023-12-25T10:13:25Z",
+      "resolved": "github:NixOS/nixpkgs/e1fa12d4f6c6fe19ccb59cac54b5b3f25e160870#nodejs_21",
+      "source": "devbox-search",
+      "version": "21.5.0",
+      "systems": {
+        "aarch64-darwin": {
+          "store_path": "/nix/store/v8vw6h0agr1687qp1azgffg4h172w2ap-nodejs-21.5.0"
+        },
+        "aarch64-linux": {
+          "store_path": "/nix/store/wrgj8cbi8j99k1v9g2kddil5dwnjcjzp-nodejs-21.5.0"
+        },
+        "x86_64-darwin": {
+          "store_path": "/nix/store/cc7bhvkx351rsfx7wja5wxnqxis4mj9g-nodejs-21.5.0"
+        },
+        "x86_64-linux": {
+          "store_path": "/nix/store/jra6nl09vh0grv4s7m3q778havhs1l6i-nodejs-21.5.0"
+        }
+      }
+    },
+    "yarn@latest": {
+      "last_modified": "2023-12-13T22:54:10Z",
+      "resolved": "github:NixOS/nixpkgs/fd04bea4cbf76f86f244b9e2549fca066db8ddff#yarn",
+      "source": "devbox-search",
+      "version": "1.22.19",
+      "systems": {
+        "aarch64-darwin": {
+          "store_path": "/nix/store/45vwimqzlg79phkshmci9rw2r94vns9y-yarn-1.22.19"
+        },
+        "aarch64-linux": {
+          "store_path": "/nix/store/4gfk6b9d1dvpgb8l6c853vsma20n4578-yarn-1.22.19"
+        },
+        "x86_64-darwin": {
+          "store_path": "/nix/store/fscsn6nbpfszb813njzk5f77vi1p9mb3-yarn-1.22.19"
+        },
+        "x86_64-linux": {
+          "store_path": "/nix/store/fpi2d88hrwazxm7ign8ivapcnwfzaj1g-yarn-1.22.19"
+        }
+      }
+    }
+  }
+}

src/App.vue

@@ -3,7 +3,8 @@ import StyledQRCode from '@/components/StyledQRCode.vue'
 import {
   copyImageToClipboard,
   downloadPngElement,
-  downloadSvgElement
+  downloadSvgElement,
+  IS_COPY_IMAGE_TO_CLIPBOARD_SUPPORTED
 } from '@/utils/convertToImage'
 import type { CornerDotType, CornerSquareType, DotType } from 'qr-code-styling'
 import { computed, ref, watch } from 'vue'
@@ -293,6 +294,7 @@ function uploadImage() {
           <div class="mt-4 flex flex-col items-center gap-2">
             <div class="flex flex-col items-center justify-center gap-3">
               <button
+                v-if="IS_COPY_IMAGE_TO_CLIPBOARD_SUPPORTED"
                 id="copy-qr-image-button"
                 class="button flex w-fit flex-row gap-1"
                 @click="copyQRToClipboard"

src/utils/convertToImage.ts

@@ -28,20 +28,25 @@ const getResizeScaleToFit = (child: HTMLElement, width: number, height: number):
   return maxScale
 }
 
+export const IS_COPY_IMAGE_TO_CLIPBOARD_SUPPORTED =
+  navigator.clipboard && navigator.clipboard.write != undefined
+
 export async function copyImageToClipboard(element: HTMLElement, options: Options) {
-  console.debug('Converting to blob')
-  const formattedOptions = getFormattedOptions(element, options)
-  domtoimage.toBlob(element, formattedOptions).then((blob: Blob) => {
-    const item = new ClipboardItem({ [blob.type]: blob })
-    navigator.clipboard.write([item]).then(
-      () => {
-        console.log('Blob copied to clipboard')
-      },
-      (error) => {
-        console.error('Error copying blob to clipboard:', error)
-      }
-    )
-  })
+  if (IS_COPY_IMAGE_TO_CLIPBOARD_SUPPORTED) {
+    const formattedOptions = getFormattedOptions(element, options)
+    console.debug('Converting to blob')
+    domtoimage.toBlob(element, formattedOptions).then((blob: Blob) => {
+      const item = new ClipboardItem({ [blob.type]: blob })
+      navigator.clipboard.write([item]).then(
+        () => {
+          console.log('Blob copied to clipboard')
+        },
+        (error) => {
+          console.error('Error copying blob to clipboard:', error)
+        }
+      )
+    })
+  }
 }
 
 export function downloadPngElement(element: HTMLElement, filename: string, options: Options) {