New: Copy image to clipboard

Author: ollm

CHANGELOG.md

@@ -16,7 +16,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Support for `HEIC` image format [`4f4b5a1`](https://github.com/ollm/OpenComic/commit/4f4b5a16572ea2bd5aff2e519d473b42d80312fb)
 - Option to apply configuration profile based on folder/file label [`71d9ff5`](https://github.com/ollm/OpenComic/commit/71d9ff5655f934e4d710e1833b081e4fddf8d428)
 - Option to disable `Align with next horizontal` when reading on double page [`97d8ecd`](https://github.com/ollm/OpenComic/commit/97d8ecdde04c2a5c418440d8fbbf06496b16c8ba)
-- Option in setting to adjust gamepad sensitivity
+- Option in setting to adjust gamepad sensitivity [`f309c27`](https://github.com/ollm/OpenComic/commit/f309c27195ccf91b0d20600c06f1af03deee5611)
+- Copy image to clipboard
 
 ##### 🐛 Bug Fixes
 

languages/ca.json

@@ -56,6 +56,8 @@
 			"saveBookmarksImages": "Guardar les imatges marcades actuals",
 			"saveAllBookmarksImages": "Guardar totes les imatges marcades",
 			"saveImagesMessage": "S'han guardat correctament les imatges",
+			"copyImage": "Copia la imatge al porta-retalls",
+			"copyImageMessage": "S'ha copiat la imatge al porta-retalls",
 			"clearFileCache": "Netejar la memòria cau de l'arxiu",
 			"clearFileCacheSuccessfully": "S'ha netejat correctament la memòria cau de l'arxiu",
 			"closeApp": "Tancar OpenComic"

languages/en.json

@@ -56,6 +56,8 @@
 			"saveBookmarksImages": "Save current bookmarked images",
 			"saveAllBookmarksImages": "Save all bookmarked images",
 			"saveImagesMessage": "Images have been saved successfully",
+			"copyImage": "Copy image to clipboard",
+			"copyImageMessage": "Image has been copied to clipboard",
 			"clearFileCache": "Clear file cache",
 			"clearFileCacheSuccessfully": "File cache has been successfully cleared",
 			"closeApp": "Close OpenComic"

languages/es.json

@@ -56,6 +56,8 @@
 			"saveBookmarksImages": "Guardar las imágenes marcadas actuales",
 			"saveAllBookmarksImages": "Guardar todas las imágenes marcadas",
 			"saveImagesMessage": "Se han guardado correctamente las imágenes",
+			"copyImage": "Copiar imagen al portapapeles",
+			"copyImageMessage": "Se ha copiado la imagen al portapapeles",
 			"clearFileCache": "Limpiar caché del archivo",
 			"clearFileCacheSuccessfully": "Se ha limpiado correctamente la caché del archivo",
 			"closeApp": "Cerrar OpenComic"

scripts/reading/context-menu.js

@@ -122,7 +122,7 @@ function saveImage()
 	saveAllImages(position);
 }
 
-function saveAllImages(position = false)
+function saveAllImages(position = false, _return = false)
 {
 	const images = reading.images();
 	const imagesData = reading.imagesData();
@@ -141,6 +141,9 @@ function saveAllImages(position = false)
 			highestPage = +key;
 	}
 
+	if(_return)
+		return toSave;
+
 	saveImages(toSave, String(highestPage).length);
 }
 
@@ -261,6 +264,108 @@ function saveDialogDirectory(callback)
 	});
 }
 
+async function copyImageToClipboard()
+{
+	const position = reading.currentImagePosition();
+	const images = saveAllImages(position, true);
+	const len = images.length;
+
+	if(!len)
+		return;
+
+	for(let i = 0; i < len; i++)
+	{
+		images[i].image = fileManager.realPath(images[i].path);
+	}
+
+	const sizes = await image.getSizes(images);
+	let maxHeight = 0;
+
+	for(let i = 0; i < len; i++)
+	{
+		const size = sizes[i];
+
+		if(size.height > maxHeight)
+			maxHeight = size.height;
+	}
+
+	// Generate new sizes
+	const resizes = [];
+	let sumWidth = 0;
+
+	for(let i = 0; i < len; i++)
+	{
+		const size = sizes[i];
+		const factor = maxHeight / size.height;
+		const width = Math.round(size.width * factor);
+
+		resizes.push({
+			width: width,
+			height: Math.round(size.height * factor),
+		});
+
+		sumWidth += width;
+	}
+
+	// Resize images to blob and put them on canvas
+	const canvas = document.createElement('canvas');
+	canvas.width = sumWidth;
+	canvas.height = maxHeight;
+	const ctx = canvas.getContext('2d');
+
+	let left = 0;
+
+	for(let i = 0; i < len; i++)
+	{
+		let src = images[i].image;
+
+		const size = resizes[i];
+		const options = {
+			width: size.width,
+			height: size.height,
+			kernel: 'lanczos3',
+			compressionLevel: 0,
+		};
+
+		if(imageExtensions.blob.includes(app.extname(src))) // Convert unsupported images to blob
+		{
+			src = await workers.convertImageToBlob(src, {priorize: true});
+			options.blob = true;
+		}
+
+		let data = await image.resizeToBlob(src, options);
+
+		// Draw image
+		const img = new Image();
+		img.src = data.blob;
+		await img.decode();
+		ctx.drawImage(img, left, 0);
+
+		left += size.width;
+
+		URL.revokeObjectURL(data.blob);
+	}
+
+	const nativeImage = electron.nativeImage.createFromDataURL(canvas.toDataURL(), {
+		width: sumWidth,
+		height: maxHeight,
+	});
+
+	electron.clipboard.writeImage(nativeImage, 'clipboard');
+
+	events.snackbar({
+		key: 'copyImageToClipboard',
+		text: language.global.contextMenu.copyImageMessage,
+		duration: 6,
+		buttons: [
+			{
+				text: language.buttons.dismiss,
+				function: 'events.closeSnackbar();',
+			},
+		],
+	});
+}
+
 module.exports = {
 	show: show,
 	openFileLocation: openFileLocation,
@@ -271,4 +376,5 @@ module.exports = {
 	saveAllImages: saveAllImages,
 	saveBookmarksImages: saveBookmarksImages,
 	saveAllBookmarksImages: saveAllBookmarksImages,
+	copyImageToClipboard: copyImageToClipboard,
 };

scripts/shortcuts.js

@@ -191,6 +191,7 @@ function loadShortcuts()
 				'zoomRight',
 				'saveImage',
 				'saveAllImages',
+				'copyImage',
 				'saveBookmarksImages',
 				'saveAllBookmarksImages',
 				'resetZoom',
@@ -272,6 +273,7 @@ function loadShortcuts()
 					items: [
 						'saveImage',
 						'saveAllImages',
+						'copyImage',
 						'saveBookmarksImages',
 						'saveAllBookmarksImages',
 					],
@@ -765,6 +767,14 @@ function loadShortcuts()
 						return true;
 					},
 				},
+				copyImage: {
+					name: language.global.contextMenu.copyImage,
+					function: function(event){
+						if(inputIsFocused() || !reading.isLoaded()) return false;
+						reading.contextMenu.copyImageToClipboard();
+						return true;
+					},
+				},
 				saveBookmarksImages: {
 					name: language.global.contextMenu.saveBookmarksImages,
 					function: function(event){
@@ -861,6 +871,7 @@ function loadShortcuts()
 				'Esc': 'goBack',
 				'Backspace': 'goBack',
 				'Ctrl+S': 'saveImage',
+				'Ctrl+C': 'copyImage',
 				'F11': 'fullscreen',
 				'G': 'gamepadMenu',
 			},

templates/reading.elements.menus.html

@@ -198,6 +198,11 @@
 					<span>{{language.global.contextMenu.saveAllImages}}</span>
 				</div>
 
+				<div class="menu-simple-element menu-simple-element-little reading-context-menu-copy-image gamepad-item" onclick="reading.contextMenu.copyImageToClipboard();">
+					<i class="material-icon menu-simple-icon-first">content_copy</i>
+					<span>{{language.global.contextMenu.copyImage}}</span>
+				</div>
+
 				<div class="menu-simple-separator separator-save-images"></div>
 
 				<div class="menu-simple-element menu-simple-element-little reading-context-menu-save-bookmarks-images gamepad-item" onclick="reading.contextMenu.saveBookmarksImages(true);">