EPUB/Snapshot: Support copying/saving images

https://forums.zotero.org/discussion/128783/feature-request-for-zotero-copy-save-image-settings-for-epubs

Author: AbeJellinek

src/common/context-menu.js

@@ -98,16 +98,31 @@ export function createViewContextMenu(reader, params) {
 					onCommand: () => {
 						navigator.clipboard.writeText(params.overlay.url);
 					}
-				}
-			],
-			[
+				},
 				{
 					label: reader._getString('general-copy'),
 					disabled: !(params.overlay && params.overlay.type === 'math' && !reader.canCopy),
 					onCommand: () => {
 						navigator.clipboard.writeText(params.overlay.tex);
 					}
-				}
+				},
+				{
+					label: reader._getString('reader-copy-image'),
+					disabled: !(params.overlay && params.overlay.type === 'image' && !reader.canCopy
+						&& typeof navigator.clipboard.write === 'function'),
+					onCommand: async () => {
+						// Browsers generally only support image/png in the Clipboard API,
+						// so use a canvas to convert to PNG
+						let bitmap = await createImageBitmap(params.overlay.image);
+						let canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+						let ctx = canvas.getContext('bitmaprenderer');
+						ctx.transferFromImageBitmap(bitmap);
+						let blob = await canvas.convertToBlob({ type: 'image/png' });
+						await navigator.clipboard.write([
+							new ClipboardItem({ [blob.type]: blob })
+						]);
+					}
+				},
 			],
 			[
 				{
@@ -116,6 +131,21 @@ export function createViewContextMenu(reader, params) {
 					onCommand: () => reader.copy()
 				}
 			],
+			[
+				(reader._platform === 'zotero' || window.dev) && {
+					label: reader._getString('reader-save-image-as'),
+					disabled: !(params.overlay && params.overlay.type === 'image'),
+					onCommand: async () => {
+						// onSaveImageAs() expects PNG
+						let bitmap = await createImageBitmap(params.overlay.image);
+						let canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+						let ctx = canvas.getContext('bitmaprenderer');
+						ctx.transferFromImageBitmap(bitmap);
+						let blob = await canvas.convertToBlob({ type: 'image/png' });
+						reader._onSaveImageAs(blob);
+					},
+				}
+			],
 			[
 				{
 					label: reader._getString('reader-zoom-in'),

src/common/types.ts

@@ -192,4 +192,8 @@ export type ViewContextMenuOverlay =
 	| {
 		type: 'math';
 		tex: string;
+	}
+	| {
+		type: 'image';
+		image: ImageBitmapSource;
 	};

src/dom/common/dom-view.tsx

@@ -1267,6 +1267,14 @@ abstract class DOMView<State extends DOMViewState, Data> {
 			};
 		}
 
+		let img = el.closest('img');
+		if (img && /^(data|blob):/.test(img.src)) {
+			return {
+				type: 'image',
+				image: img,
+			};
+		}
+
 		return undefined;
 	}