feat: optimize copy image to clipboard (#12366)

* feat: optimize copy image to clipboard

* pr feedback

* fix: urlToBlob

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* fix: imgToBlob

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* chore: finish rename

* fix: dimensions

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/lib/utils/asset-utils.ts

@@ -527,3 +527,41 @@ export const archiveAssets = async (assets: AssetResponseDto[], archive: boolean
 export const delay = async (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+export const canCopyImageToClipboard = (): boolean => {
+  return !!(navigator.clipboard && window.ClipboardItem);
+};
+
+const imgToBlob = async (imageElement: HTMLImageElement) => {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+
+  canvas.width = imageElement.naturalWidth;
+  canvas.height = imageElement.naturalHeight;
+
+  if (context) {
+    context.drawImage(imageElement, 0, 0);
+
+    return await new Promise<Blob>((resolve) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          throw new Error('Canvas conversion to Blob failed');
+        }
+      });
+    });
+  }
+
+  throw new Error('Canvas context is null');
+};
+
+const urlToBlob = async (imageSource: string) => {
+  const response = await fetch(imageSource);
+  return await response.blob();
+};
+
+export const copyImageToClipboard = async (source: HTMLImageElement | string) => {
+  const blob = source instanceof HTMLImageElement ? await imgToBlob(source) : await urlToBlob(source);
+  await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+};