From d804f56152e853f38a371fbd810b26159c701f42 Mon Sep 17 00:00:00 2001 From: raphael Date: Wed, 20 May 2020 14:24:33 +0200 Subject: [PATCH] add option to download images in different formats --- config.default.yml | 3 +++ scripts/config/config-schema.json | 3 +++ scripts/server-backend.js | 3 ++- src/js/main.js | 11 +++++++---- src/js/services/ConfigService.js | 16 +++++++++++++++- src/js/whiteboard.js | 9 +++++++-- 6 files changed, 37 insertions(+), 8 deletions(-) diff --git a/config.default.yml b/config.default.yml index 2ac3912..56ef07c 100644 --- a/config.default.yml +++ b/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 diff --git a/scripts/config/config-schema.json b/scripts/config/config-schema.json index b482909..2f33968 100644 --- a/scripts/config/config-schema.json +++ b/scripts/config/config-schema.json @@ -48,6 +48,9 @@ "showSmallestScreenIndicator": { "type": "boolean" }, + "imageDownloadFormat": { + "type": "string" + }, "performance": { "type": "object", "additionalProperties": false, diff --git a/scripts/server-backend.js b/scripts/server-backend.js index 66ae122..e01a013 100644 --- a/scripts/server-backend.js +++ b/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); diff --git a/src/js/main.js b/src/js/main.js index 80a9bab..09f0d08 100644 --- a/src/js/main.js +++ b/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, diff --git a/src/js/services/ConfigService.js b/src/js/services/ConfigService.js index c00b70e..40ccea4 100644 --- a/src/js/services/ConfigService.js +++ b/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); diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js index be1e5ae..512700f 100644 --- a/src/js/whiteboard.js +++ b/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); } }