Use jimp for image processing when starting Electron app with flag "--alternativeImageProcessing"

Author: tkleinke

desktop/electron/main.js

@@ -227,6 +227,8 @@ global.manualPath = global.mode === 'production'
     ? electron.app.getAppPath().replace('app.asar', 'manual')
     : './manual';
 
+global.imageProcessing = process.argv.includes('--alternativeImageProcessing') ? 'jimp' : 'sharp';
+
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
 
 

desktop/package.json

@@ -152,6 +152,7 @@
     "geotiff": "2.0.7",
     "idai-field-core": "^1.4.0",
     "image-size": "2.0.2",
+    "jimp": "1.6.0",
     "leaflet": "1.7.1",
     "panzoom": "9.4.3",
     "pouchdb-browser": "9.0.0",

desktop/src/app/components/app-initializer.ts

@@ -14,7 +14,7 @@ import { ExpressServer } from '../services/express-server/express-server';
 import { ConfigurationIndex } from '../services/configuration/index/configuration-index';
 import { copyThumbnailsFromDatabase } from '../migration/thumbnail-copy';
 import { Languages } from '../services/languages';
-import { createDisplayVariant } from '../services/imagestore/create-display-variant';
+import { createDisplayVariant } from '../services/imagestore/manipulation/create-display-variant';
 import { Backup } from '../services/backup/model/backup';
 import { BackupService, RestoreBackupResult } from '../services/backup/backup-service';
 import { getExistingBackups } from '../services/backup/auto-backup/get-existing-backups';

desktop/src/app/components/image/upload/image-uploader.ts

@@ -11,10 +11,10 @@ import { M } from '../../messages/m';
 import { ImageUploadMetadataModalComponent } from './image-upload-metadata-modal.component';
 import { UploadModalComponent } from './upload-modal.component';
 import { UploadStatus } from './upload-status';
-import { ImageManipulationErrors } from '../../../services/imagestore/image-manipulation';
+import { ImageManipulationErrors } from '../../../services/imagestore/manipulation/image-manipulation';
 import { ImageMetadata, extendMetadataByFileData } from '../../../services/imagestore/file-metadata';
 import { getGeoreferenceFromGeotiff } from '../georeference/geotiff-import';
-import { createDisplayVariant } from '../../../services/imagestore/create-display-variant';
+import { createDisplayVariant } from '../../../services/imagestore/manipulation/create-display-variant';
 import { ImagesState } from '../overview/view/images-state';
 import { getAsynchronousFs } from '../../../services/get-asynchronous-fs';
 import { getSystemTimezone } from '../../../util/timezones';

desktop/src/app/services/imagestore/create-display-variant.ts

@@ -1,7 +1,7 @@
 import { Injectable, SecurityContext } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Datastore, ImageDocument, ImageStore, ImageVariant } from 'idai-field-core';
-import { createDisplayVariant } from './create-display-variant';
+import { createDisplayVariant } from './manipulation/create-display-variant';
 
 
 @Injectable()

desktop/src/app/services/imagestore/image-url-maker.ts

@@ -0,0 +1,22 @@
+import { ImageDocument, ImageStore } from 'idai-field-core';
+import { SharpDisplayVariantCreation } from './sharp/sharp-display-variant-creation';
+import { JimpDisplayVariantCreation } from './jimp/jimp-display-variant-creation';
+
+const remote = window.require('@electron/remote');
+const imageProcessing: 'sharp'|'jimp' = remote?.getGlobal('imageProcessing') ?? 'sharp';
+
+console.log('Using image processing library: ' + imageProcessing);
+
+
+/**
+ * @author Thomas Kleinke
+ * 
+ * @returns A buffer containing data of a newly created display variant, or undefined if no display variant is needed.
+ */
+export async function createDisplayVariant(document: ImageDocument, imagestore: ImageStore,
+                                           originalData: Buffer): Promise<Buffer|undefined> {
+    
+    return imageProcessing === 'sharp'
+        ? SharpDisplayVariantCreation.createDisplayVariant(document, imagestore, originalData)
+        : JimpDisplayVariantCreation.createDisplayVariant(document, imagestore, originalData);
+};

desktop/src/app/services/imagestore/manipulation/create-display-variant.ts

@@ -0,0 +1,32 @@
+import { JimpImageManipulation } from './jimp/jimp-image-manipulation';
+import { SharpImageManipulation } from './sharp/sharp-image-manipulation';
+
+const remote = window.require('@electron/remote');
+const imageProcessing: 'sharp'|'jimp' = remote?.getGlobal('imageProcessing') ?? 'sharp';
+
+
+export module ImageManipulationErrors {
+
+    export const MAX_INPUT_PIXELS_EXCEEDED = 'imageManipulation/maxInputPixelsExceeded';
+}
+
+
+/**
+ * @author Thomas Kleinke
+ */
+export module ImageManipulation {
+
+    export const MAX_INPUT_PIXELS = 2500000000;
+    export const MAX_ORIGINAL_PIXELS = 25000000;
+    export const MAX_DISPLAY_WIDTH = 10000;
+    export const MAX_DISPLAY_HEIGHT = 10000;
+
+
+    export async function createThumbnail(buffer: Buffer, targetHeight: number,
+                                          targetJpegQuality: number): Promise<Buffer> {
+
+        return imageProcessing === 'sharp'
+            ? SharpImageManipulation.createThumbnail(buffer, targetHeight, targetJpegQuality)
+            : JimpImageManipulation.createThumbnail(buffer, targetHeight, targetJpegQuality);
+    }
+}

desktop/src/app/services/imagestore/manipulation/image-manipulation.ts

@@ -0,0 +1,54 @@
+import { ImageDocument, ImageStore, ImageVariant } from 'idai-field-core';
+import { ImageManipulation } from '../image-manipulation';
+import { JimpImageManipulation } from './jimp-image-manipulation';
+
+
+/**
+ * @author Thomas Kleinke
+ */
+export module JimpDisplayVariantCreation {
+
+    /**
+     * @returns A buffer containing data of a newly created display variant, or undefined if no display variant is needed.
+     */
+    export async function createDisplayVariant(document: ImageDocument, imagestore: ImageStore,
+                                               originalData: Buffer): Promise<Buffer|undefined> {
+        
+        const imageId: string = document.resource.id;
+        const fileExtension: string = ImageDocument.getOriginalFileExtension(document);
+        const width: number = document.resource.width;
+        const height: number = document.resource.height;
+
+        const image = await JimpImageManipulation.getImageObject(originalData);
+
+        const convertToJpeg: boolean = shouldConvertToJpeg(
+            width * height, fileExtension, image
+        );
+
+        const resize: boolean = width > ImageManipulation.MAX_DISPLAY_WIDTH 
+            || height > ImageManipulation.MAX_DISPLAY_HEIGHT;
+
+        if (!convertToJpeg && !resize) {
+            await imagestore.addUseOriginalMarker(imageId);
+            return undefined;
+        }
+
+        const displayVariantData: Buffer = await JimpImageManipulation.createDisplayImage(
+            image, convertToJpeg, resize
+        );
+
+        await imagestore.store(imageId, displayVariantData, undefined, ImageVariant.DISPLAY);
+        
+        return displayVariantData;
+    };
+
+
+    function shouldConvertToJpeg(pixels: number, fileExtension: string, image: any): boolean {
+
+        if (fileExtension.toLowerCase().includes('tif')) return true;
+        
+        if (fileExtension.toLowerCase().includes('png') && pixels > ImageManipulation.MAX_ORIGINAL_PIXELS) {
+            return JimpImageManipulation.isOpaque(image);
+        }
+    }
+}

desktop/src/app/services/imagestore/manipulation/jimp/jimp-display-variant-creation.ts

@@ -0,0 +1,51 @@
+import { Jimp } from 'jimp';
+import { ImageManipulation } from '../image-manipulation';
+
+
+/**
+ * @author Thomas Kleinke
+ */
+export module JimpImageManipulation {
+
+    export function getImageObject(buffer: Buffer): Promise<any> {
+
+        return Jimp.fromBuffer(buffer);
+    }
+
+
+    export async function createThumbnail(buffer: Buffer, targetHeight: number,
+                                          targetJpegQuality: number): Promise<Buffer> {
+
+        try {
+            const image = await getImageObject(buffer);
+            return image.resize({ h: targetHeight })
+                .getBuffer('image/jpeg', { quality: targetJpegQuality });
+        } catch (err) {
+            console.error('Failed to generate thumbnail:', err);
+            return undefined;
+        }
+    }
+
+
+    export function isOpaque(image: any): boolean {
+
+        return image.hasAlpha();
+    }
+
+    
+    export async function createDisplayImage(image: any, convertToJpeg: boolean, resize: boolean): Promise<Buffer> {
+
+        if (resize) {
+            image = image.scaleToFit({
+                w: ImageManipulation.MAX_DISPLAY_WIDTH,
+                h: ImageManipulation.MAX_DISPLAY_HEIGHT
+            });
+        }
+
+        const mimeType: string = convertToJpeg || !image.mime
+            ? 'image/jpeg'
+            : image.mime;
+        
+        return image.getBuffer(mimeType);
+    }
+}