fix text to png

package-lock.json

@@ -3948,6 +3948,21 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+          "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+        }
+      }
+    },
     "css-loader": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.2.tgz",
@@ -6030,6 +6045,14 @@
         "util.promisify": "1.0.0"
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
+      "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "express": "4.*",
     "formidable": "1.*",
     "fs-extra": "7.*",
+    "html2canvas": "^1.0.0-rc.5",
     "js-yaml": "3.13.1",
     "jsdom": "^14.0.0",
     "pdfjs-dist": "^2.3.200",

src/js/main.js

@@ -238,21 +238,21 @@ function initWhiteboard() {
 
         // save image as png
         $("#saveAsImageBtn").click(function () {
-            var imgData = whiteboard.getImageDataBase64();
+            whiteboard.getImageDataBase64(function (imgData) {
-
+                var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
-            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";
-                w.document.body.appendChild(a);
-                a.click();
-                w.document.body.removeChild(a);
                 setTimeout(function () {
-                    w.close();
+                    //FireFox seems to require a setTimeout for this to work.
-                }, 100);
+                    var a = document.createElement("a");
-            }, 0);
+                    a.href = imgData;
+                    a.download = "whiteboard.png";
+                    w.document.body.appendChild(a);
+                    a.click();
+                    w.document.body.removeChild(a);
+                    setTimeout(function () {
+                        w.close();
+                    }, 100);
+                }, 0);
+            });
         });
 
         // save image to json containing steps
@@ -333,22 +333,23 @@ function initWhiteboard() {
                 localStorage.setItem("webdavusername", webdavusername);
                 var webdavpassword = webDavHtml.find(".webdavpassword").val();
                 localStorage.setItem("webdavpassword", webdavpassword);
-                var base64data = whiteboard.getImageDataBase64();
+                whiteboard.getImageDataBase64(function (base64data) {
-                var webdavaccess = {
+                    var webdavaccess = {
-                    webdavserver: webdavserver,
+                        webdavserver: webdavserver,
-                    webdavpath: webdavpath,
+                        webdavpath: webdavpath,
-                    webdavusername: webdavusername,
+                        webdavusername: webdavusername,
-                    webdavpassword: webdavpassword,
+                        webdavpassword: webdavpassword,
-                };
+                    };
-                webDavHtml.find(".loadingWebdavText").show();
+                    webDavHtml.find(".loadingWebdavText").show();
-                webDavHtml.find(".webdavUploadBtn").hide();
+                    webDavHtml.find(".webdavUploadBtn").hide();
-                saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
+                    saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
-                    if (err) {
+                        if (err) {
-                        webDavHtml.find(".loadingWebdavText").hide();
+                            webDavHtml.find(".loadingWebdavText").hide();
-                        webDavHtml.find(".webdavUploadBtn").show();
+                            webDavHtml.find(".webdavUploadBtn").show();
-                    } else {
+                        } else {
-                        webDavHtml.parents(".basicalert").remove();
+                            webDavHtml.parents(".basicalert").remove();
-                    }
+                        }
+                    });
                 });
             });
             showBasicAlert(webDavHtml, {

src/js/utils.js

@@ -42,12 +42,3 @@ export function getSubDir() {
 
     return subdir;
 }
-
-export function fillTextMultiLine(ctx, text, x, y) {
-    var lineHeight = ctx.measureText("M").width * 2.5;
-    var lines = text.split("\n");
-    for (var i = 0; i < lines.length; ++i) {
-        ctx.fillText(lines[i], x, y);
-        y += lineHeight;
-    }
-}

src/js/whiteboard.js

@@ -5,6 +5,7 @@ import InfoService from "./services/InfoService";
 import ThrottlingService from "./services/ThrottlingService";
 import ConfigService from "./services/ConfigService";
 import { fillTextMultiLine } from "./utils";
+import html2canvas from "html2canvas";
 
 const RAD_TO_DEG = 180.0 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180.0;
@@ -1172,7 +1173,7 @@ const whiteboard = {
     refreshUserBadges() {
         this.cursorContainer.find(".userbadge").remove();
     },
-    getImageDataBase64() {
+    getImageDataBase64(callback) {
         var _this = this;
         var width = this.mouseOverlay.width();
         var height = this.mouseOverlay.height();
@@ -1194,25 +1195,35 @@ const whiteboard = {
         var destCtx = copyCanvas.getContext("2d"); //Draw the maincanvas to the exportcanvas
         destCtx.drawImage(this.canvas, 0, 0);
 
+        var textBoxCnt = 0;
         $.each($(".textBox"), function () {
             //Draw the text on top
+            textBoxCnt++;
+
             var textContainer = $(this);
-            var textEl = $(this).find(".textContent");
-            var text = textEl.html();
-            text = text.split("<div>").join("").split("</div>").join("\n");
-            var fontSize = textEl.css("font-size");
-            var fontColor = textEl.css("color");
             var p = textContainer.position();
+
             var left = Math.round(p.left * 100) / 100;
             var top = Math.round(p.top * 100) / 100;
-            top += 25; //Fix top position
+
-            ctx.font = fontSize + " Monospace";
+            html2canvas(this, { backgroundColor: "rgba(0, 0, 0, 0)", removeContainer: true }).then(
-            ctx.fillStyle = fontColor;
+                function (canvas) {
-            fillTextMultiLine(ctx, text, left, top);
+                    console.log("canvas", canvas);
+
+                    destCtx.drawImage(canvas, left, top);
+                    textBoxCnt--;
+                    checkForReturn();
+                }
+            );
         });
 
-        var url = copyCanvas.toDataURL();
+        function checkForReturn() {
-        return url;
+            if (textBoxCnt == 0) {
+                var url = copyCanvas.toDataURL();
+                callback(url);
+            }
+        }
+        checkForReturn();
     },
     getImageDataJson() {
         var sendObj = [];