WebContextMenus: Fix jpegs being uncopyable

src/plugins/webContextMenus.web.ts

@@ -179,14 +179,25 @@ export default definePlugin({
     ],
 
     async copyImage(url: string) {
-        const data = await fetchImage(url);
-        if (!data) return;
+        // 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);
 
-        await navigator.clipboard.write([
+            canvas.toBlob(data => {
+                navigator.clipboard.write([
                     new ClipboardItem({
-                [data.type]: data
+                        "image/png": data!
                     })
                 ]);
+            }, "image/png");
+        };
+        img.crossOrigin = "anonymous";
+        img.src = url;
     },
 
     async saveImage(url: string) {