Add clipboard support for image/webp

src/client/clipboard.ts

@@ -10,11 +10,61 @@ declare interface ClipboardItem {
     getType(type: string): Promise<Blob>;
 }
 
-export async function writeImageToClipboard(blob: Blob) {
-    const item = new ClipboardItem({ 'image/png': blob });
+async function convertWebPToPNG(webpBlob: Blob): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = URL.createObjectURL(webpBlob);
+
+        image.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Unable to get canvas context'));
+                return;
+            }
+
+            ctx.drawImage(image, 0, 0);
+
+            canvas.toBlob((pngBlob) => {
+                if (pngBlob) {
+                    resolve(pngBlob);
+                } else {
+                    reject(new Error('Canvas to Blob conversion failed'));
+                }
+            }, 'image/png');
+
+            URL.revokeObjectURL(url);
+        };
+
+        image.onerror = () => {
+            reject(new Error('Error loading WebP image'));
+            URL.revokeObjectURL(url);
+        };
+
+        image.src = url;
+    });
+}
+
+export async function writeImageToClipboard(blob: Blob, mimeType: string) {
+    let imageBlob = blob;
+
+    // Convert WebP to PNG if necessary
+    if (mimeType === 'image/webp') {
+        imageBlob = await convertWebPToPNG(blob);
+        mimeType = 'image/png'; // Update the mimeType to 'image/png'
+    }
+
+    // Create ClipboardItem with the correct mimeType
+    const item = new ClipboardItem({ [mimeType]: imageBlob });
+
+    // Check if clipboard API is supported
     if (!('write' in navigator.clipboard)) {
         throw new Error('navigator.clipboard.write not supported');
     }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     await (navigator.clipboard as any).write([item]);
 }

src/client/render.tsx

@@ -87,7 +87,7 @@ export class CellOutput extends React.Component<ICellOutputProps> {
             mimeType.toLowerCase().includes('svg') && typeof data === 'string' ? undefined : URL.createObjectURL(data);
         const customMetadata = metadata.metadata as PartialJSONObject | undefined;
         const showPlotViewer = metadata.__displayOpenPlotIcon === true;
-        const showCopyImage = mimeType === 'image/png';
+        const showCopyImage = mimeType === 'image/png' || mimeType === 'image/webp';
         const copyButtonMargin = showPlotViewer ? '85px' : '45px';
         if (customMetadata && typeof customMetadata.needs_background === 'string') {
             imgStyle.backgroundColor = customMetadata.needs_background === 'light' ? 'white' : 'black';
@@ -128,7 +128,7 @@ export class CellOutput extends React.Component<ICellOutputProps> {
             }
         };
         const copyPlotImage = () => {
-            writeImageToClipboard(data as Blob).then(noop);
+            writeImageToClipboard(data as Blob, this.props.mimeType).then(noop);
         };
         const onMouseOver = () => {
             if (!(globalThis as any).__isJupyterInstalled) {