WebContextMenus: Fix jpegs being uncopyable

1 files changed, 19 insertions, 8 deletions

diff --git a/src/plugins/webContextMenus.web.ts b/src/plugins/webContextMenus.web.ts
index 6b193e5..2e9d581 100644
--- a/src/plugins/webContextMenus.web.ts
+++ b/src/plugins/webContextMenus.web.ts
@@ -179,14 +179,25 @@ export default definePlugin({
     ],
 
     async copyImage(url: string) {
-        const data = await fetchImage(url);
-        if (!data) return;
-
-        await navigator.clipboard.write([
-            new ClipboardItem({
-                [data.type]: data
-            })
-        ]);
+        // Clipboard only supports image/png, jpeg and similar won't work. Thus, we need to convert it to png
+        // via canvas first
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            canvas.getContext("2d")!.drawImage(img, 0, 0);
+
+            canvas.toBlob(data => {
+                navigator.clipboard.write([
+                    new ClipboardItem({
+                        "image/png": data!
+                    })
+                ]);
+            }, "image/png");
+        };
+        img.crossOrigin = "anonymous";
+        img.src = url;
     },
 
     async saveImage(url: string) {