add option to download images in different formats

config.default.yml

@@ -25,6 +25,9 @@ frontend:
   # Show the smallest screen indicator ? (with dotted lines) -- boolean
   showSmallestScreenIndicator: true
 
+  # Image download format, can be "png", "jpeg" (or "webp" -> only working on chrome) -- string
+  imageDownloadFormat: "png"
+
   # Frontend performance tweaks
   performance:
     # Refresh frequency of the debug / info div (in Hz i.e. /s) -- number

scripts/config/config-schema.json

@@ -48,6 +48,9 @@
         "showSmallestScreenIndicator": {
           "type": "boolean"
         },
+        "imageDownloadFormat": {
+          "type": "string"
+        },
         "performance": {
           "type": "object",
           "additionalProperties": false,

scripts/server-backend.js

@@ -26,6 +26,7 @@ function startBackendServer(port) {
     console.log("Webserver & socketserver running on port:" + port);
 
     const { accessToken, enableWebdav } = config.backend;
+    const { imageDownloadFormat } = config.frontend;
 
     app.get("/api/loadwhiteboard", function (req, res) {
         var wid = req["query"]["wid"];
@@ -91,7 +92,7 @@ function startBackendServer(port) {
 
         var name = fields["name"] || "";
         var date = fields["date"] || +new Date();
-        var filename = whiteboardId + "_" + date + ".png";
+        var filename = whiteboardId + "_" + date + "." + imageDownloadFormat;
         var webdavaccess = fields["webdavaccess"] || false;
         try {
             webdavaccess = JSON.parse(webdavaccess);

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);
             }
         }