add option to draw grid to image on download

config.default.yml

@@ -28,6 +28,9 @@ frontend:
   # Image download format, can be "png", "jpeg" (or "webp" -> only working on chrome) -- string
   imageDownloadFormat: "png"
 
+  # draw the background grid to images on download ? (If True, even PNGs are also not transparent anymore) -- boolean
+  drawBackgroundGrid: false
+
   # Frontend performance tweaks
   performance:
     # Refresh frequency of the debug / info div (in Hz i.e. /s) -- number

scripts/config/config-schema.json

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

src/js/main.js

@@ -285,7 +285,12 @@ function initWhiteboard() {
 
         // save image as imgae
         $("#saveAsImageBtn").click(function () {
-            whiteboard.getImageDataBase64(ConfigService.imageDownloadFormat, function (imgData) {
+            whiteboard.getImageDataBase64(
+                {
+                    imageFormat: ConfigService.imageDownloadFormat,
+                    drawBackgroundGrid: ConfigService.drawBackgroundGrid,
+                },
+                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.
@@ -299,7 +304,8 @@ function initWhiteboard() {
                             w.close();
                         }, 100);
                     }, 0);
-            });
+                }
+            );
         });
 
         // save image to json containing steps
@@ -380,9 +386,12 @@ function initWhiteboard() {
                 localStorage.setItem("webdavusername", webdavusername);
                 var webdavpassword = webDavHtml.find(".webdavpassword").val();
                 localStorage.setItem("webdavpassword", webdavpassword);
-                whiteboard.getImageDataBase64(ConfigService.imageDownloadFormat, function (
+                whiteboard.getImageDataBase64(
-                    base64data
+                    {
-                ) {
+                        imageFormat: ConfigService.imageDownloadFormat,
+                        drawBackgroundGrid: ConfigService.drawBackgroundGrid,
+                    },
+                    function (base64data) {
                         var webdavaccess = {
                             webdavserver: webdavserver,
                             webdavpath: webdavpath,
@@ -399,7 +408,8 @@ function initWhiteboard() {
                                 webDavHtml.parents(".basicalert").remove();
                             }
                         });
-                });
+                    }
+                );
             });
             showBasicAlert(webDavHtml, {
                 header: "Save to Webdav",

src/js/services/ConfigService.js

@@ -40,6 +40,14 @@ class ConfigService {
         return this.#imageDownloadFormat;
     }
 
+    /**
+     * @type {boolean}
+     */
+    #drawBackgroundGrid = false;
+    get drawBackgroundGrid() {
+        return this.#drawBackgroundGrid;
+    }
+
     /**
      * @type {{minDistDelta: number, minTimeDelta: number}}
      */
@@ -69,12 +77,14 @@ class ConfigService {
             onWhiteboardLoad,
             showSmallestScreenIndicator,
             imageDownloadFormat,
+            drawBackgroundGrid,
             performance,
         } = common;
 
         this.#onWhiteboardLoad = onWhiteboardLoad;
         this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
         this.#imageDownloadFormat = imageDownloadFormat;
+        this.#drawBackgroundGrid = drawBackgroundGrid;
         this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
 
         console.log("Whiteboard config from server:", configFromServer, "parsed:", this);

src/js/whiteboard.js

@@ -1173,14 +1173,33 @@ const whiteboard = {
     refreshUserBadges() {
         this.cursorContainer.find(".userbadge").remove();
     },
-    getImageDataBase64(format, callback) {
+    getImageDataBase64(options, callback) {
         var _this = this;
         var width = this.mouseOverlay.width();
         var height = this.mouseOverlay.height();
         var copyCanvas = document.createElement("canvas");
         copyCanvas.width = width;
         copyCanvas.height = height;
-        var ctx = copyCanvas.getContext("2d");
+        var imageFormat = options.imageFormat || "png";
+        var drawBackgroundGrid = options.drawBackgroundGrid || false;
+
+        var brackGroundImg = new Image();
+        brackGroundImg.src = _this.settings.backgroundGridUrl;
+
+        brackGroundImg.onload = function () {
+            var destCtx = copyCanvas.getContext("2d"); //Draw the maincanvas to the exportcanvas
+
+            if (imageFormat === "jpeg") {
+                //Set white background for jpeg images
+                destCtx.fillStyle = "#FFFFFF";
+                destCtx.fillRect(0, 0, width, height);
+            }
+
+            if (drawBackgroundGrid) {
+                var ptrn = destCtx.createPattern(brackGroundImg, "repeat"); // Create a pattern with this image, and set it to "repeat".
+                destCtx.fillStyle = ptrn;
+                destCtx.fillRect(0, 0, copyCanvas.width, copyCanvas.height); // context.fillRect(x, y, width, height);
+            }
 
             $.each(_this.imgContainer.find("img"), function () {
                 //Draw Backgroundimages to the export canvas
@@ -1189,16 +1208,11 @@ const whiteboard = {
                 var p = $(this).position();
                 var left = Math.round(p.left * 100) / 100;
                 var top = Math.round(p.top * 100) / 100;
-            ctx.drawImage(this, left, top, width, height);
+                destCtx.drawImage(this, left, top, width, height);
             });
 
-        var destCtx = copyCanvas.getContext("2d"); //Draw the maincanvas to the exportcanvas
+            //Copy drawings
-        if (format === "jpeg") {
+            destCtx.drawImage(_this.canvas, 0, 0);
-            //Set white background for jpeg images
-            destCtx.fillStyle = "#FFFFFF";
-            destCtx.fillRect(0, 0, width, height);
-        }
-        destCtx.drawImage(this.canvas, 0, 0);
 
             var textBoxCnt = 0;
             $.each($(".textBox"), function () {
@@ -1211,24 +1225,26 @@ const whiteboard = {
                 var left = Math.round(p.left * 100) / 100;
                 var top = Math.round(p.top * 100) / 100;
 
-            html2canvas(this, { backgroundColor: "rgba(0, 0, 0, 0)", removeContainer: true }).then(
+                html2canvas(this, {
-                function (canvas) {
+                    backgroundColor: "rgba(0, 0, 0, 0)",
+                    removeContainer: true,
+                }).then(function (canvas) {
                     console.log("canvas", canvas);
 
                     destCtx.drawImage(canvas, left, top);
                     textBoxCnt--;
                     checkForReturn();
-                }
+                });
-            );
             });
 
             function checkForReturn() {
                 if (textBoxCnt == 0) {
-                var url = copyCanvas.toDataURL("image/" + format);
+                    var url = copyCanvas.toDataURL("image/" + imageFormat);
                     callback(url);
                 }
             }
             checkForReturn();
+        };
     },
     getImageDataJson() {
         var sendObj = [];