Add screenshot and thumbnail functionality to webx desktop. Allow for type and quality of screenshot to be specified.

Author: stuartcaunt

package-lock.json

@@ -38,7 +38,7 @@
     "@ctrl/ngx-codemirror": "^7.0.0",
     "@illgrenoble/ngx-fs-client": "^1.2.0",
     "@illgrenoble/visa-print-client": "^1.1.3",
-    "@illgrenoble/webx-client": "^1.0.0",
+    "@illgrenoble/webx-client": "^1.1.0",
     "@ng-select/ng-select": "^10.0.4",
     "@ngrx/effects": "^15.4.0",
     "@ngrx/router-store": "^15.4.0",

package.json

@@ -266,9 +266,9 @@ export class InstanceComponent implements OnInit, OnDestroy {
      * Generate a screenshot of the remote desktop and download to the client
      */
     private createScreenshot(): void {
-        this.manager.createScreenshot().then((blob) => {
+        this.manager.createScreenshot('image/jpeg', 0.9).then((blob) => {
             if (blob) {
-                FileSaver.saveAs(blob, `screenshot.png`);
+                FileSaver.saveAs(blob, `screenshot.jpg`);
             }
         });
     }

src/app/user/instance/instance.component.ts

@@ -97,12 +97,12 @@ export class GuacamoleVirtualDesktopManager extends VirtualDesktopManager {
     /**
      * Generate a screenshot
      */
-    public createScreenshot(): Promise<Blob> {
+    public createScreenshot(type: string, quality: number): Promise<Blob> {
         return new Promise((resolve, reject) => {
             const display = this.client.getDisplay();
             if (display && display.getWidth() > 0 && display.getHeight() > 0) {
                 const canvas = display.flatten();
-                return canvas.toBlob(resolve);
+                return canvas.toBlob(resolve, type, quality);
             } else {
                 reject();
             }

src/app/vdi/services/guacamole-virtual-desktop-manager.service.ts

@@ -188,8 +188,11 @@ export abstract class VirtualDesktopManager {
 
     /**
      * Generate a screenshot
+     *
+     * @param type The image type (image/png, image/jpeg, etc.)
+     * @param quality The image quality (0-1)
      */
-    public abstract createScreenshot(): Promise<Blob>;
+    public abstract createScreenshot(type: string, quality: number): Promise<Blob>;
 
     /**
      * Send text to the remote clipboard

src/app/vdi/services/virtual-desktop-manager.service.ts

@@ -73,25 +73,38 @@ export class WebXVirtualDesktopManager extends VirtualDesktopManager {
         this._client.disconnect();
     }
 
-    async createScreenshot(): Promise<Blob> {
-        // todo
-        console.log('createScreenshot not implemented for WebX Virtual Desktop Manager');
-        return null;
+    async createScreenshot(type: string, quality: number): Promise<Blob> {
+        return this._client.createScreenshot(type, quality);
     }
 
     async createThumbnail(width: number, height: number): Promise<Blob> {
-        // todo
-        console.log('createThumbnail not implemented for WebX Virtual Desktop Manager');
-        return null;
+        const screenshotBlob = await this.createScreenshot('image/png', 1.0);
+        const img = new Image();
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = width;
+        canvas.height = height;
+
+        return new Promise((resolve, reject) => {
+            const url = URL.createObjectURL(screenshotBlob);
+            img.onload = () => {
+                ctx.drawImage(img, 0, 0, width, height);
+                canvas.toBlob(blob => {
+                    resolve(blob);
+                    URL.revokeObjectURL(url);
+                }, 'image/jpeg', 0.8);
+            };
+            img.onerror = reject;
+            img.src = url;
+        });
     }
 
     sendRemoteClipboardData(text: string): void {
         // todo
         throw new Error('sendRemoteClipboardData not implemented for WebX Virtual Desktop Manager');
     }
 
-
-
     private _onConnected(): void {
         this.setState(VirtualDesktopManager.STATE.WAITING);