add option to download images in different formats

src/js/main.js

@@ -283,15 +283,16 @@ function initWhiteboard() {
             showBasicAlert("Please drag the image into the browser.");
         });
 
-        // save image as png
+        console.log(ConfigService.imageDownloadFormat, ConfigService.showSmallestScreenIndicator);
+        // save image as imgae
         $("#saveAsImageBtn").click(function () {
-            whiteboard.getImageDataBase64(function (imgData) {
+            whiteboard.getImageDataBase64(ConfigService.imageDownloadFormat, function (imgData) {
                 var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
                 setTimeout(function () {
                     //FireFox seems to require a setTimeout for this to work.
                     var a = document.createElement("a");
                     a.href = imgData;
-                    a.download = "whiteboard.png";
+                    a.download = "whiteboard." + ConfigService.imageDownloadFormat;
                     w.document.body.appendChild(a);
                     a.click();
                     w.document.body.removeChild(a);
@@ -380,7 +381,9 @@ function initWhiteboard() {
                 localStorage.setItem("webdavusername", webdavusername);
                 var webdavpassword = webDavHtml.find(".webdavpassword").val();
                 localStorage.setItem("webdavpassword", webdavpassword);
-                whiteboard.getImageDataBase64(function (base64data) {
+                whiteboard.getImageDataBase64(ConfigService.imageDownloadFormat, function (
+                    base64data
+                ) {
                     var webdavaccess = {
                         webdavserver: webdavserver,
                         webdavpath: webdavpath,

src/js/services/ConfigService.js

@@ -32,6 +32,14 @@ class ConfigService {
         return this.#showSmallestScreenIndicator;
     }
 
+    /**
+     * @type {string}
+     */
+    #imageDownloadFormat = "png";
+    get imageDownloadFormat() {
+        return this.#imageDownloadFormat;
+    }
+
     /**
      * @type {{minDistDelta: number, minTimeDelta: number}}
      */
@@ -57,10 +65,16 @@ class ConfigService {
         this.#configFromServer = configFromServer;
 
         const { common } = configFromServer;
-        const { onWhiteboardLoad, showSmallestScreenIndicator, performance } = common;
+        const {
+            onWhiteboardLoad,
+            showSmallestScreenIndicator,
+            imageDownloadFormat,
+            performance,
+        } = common;
 
         this.#onWhiteboardLoad = onWhiteboardLoad;
         this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
+        this.#imageDownloadFormat = imageDownloadFormat;
         this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
 
         console.log("Whiteboard config from server:", configFromServer, "parsed:", this);

src/js/whiteboard.js

@@ -1173,7 +1173,7 @@ const whiteboard = {
     refreshUserBadges() {
         this.cursorContainer.find(".userbadge").remove();
     },
-    getImageDataBase64(callback) {
+    getImageDataBase64(format, callback) {
         var _this = this;
         var width = this.mouseOverlay.width();
         var height = this.mouseOverlay.height();
@@ -1193,6 +1193,11 @@ const whiteboard = {
         });
 
         var destCtx = copyCanvas.getContext("2d"); //Draw the maincanvas to the exportcanvas
+        if (format === "jpeg") {
+            //Set white background for jpeg images
+            destCtx.fillStyle = "#FFFFFF";
+            destCtx.fillRect(0, 0, width, height);
+        }
         destCtx.drawImage(this.canvas, 0, 0);
 
         var textBoxCnt = 0;
@@ -1219,7 +1224,7 @@ const whiteboard = {
 
         function checkForReturn() {
             if (textBoxCnt == 0) {
-                var url = copyCanvas.toDataURL();
+                var url = copyCanvas.toDataURL("image/" + format);
                 callback(url);
             }
         }