diff --git a/package-lock.json b/package-lock.json index 31b7aee..b469b55 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3a5d003..6b8d6cb 100644 --- a/package.json +++ b/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", diff --git a/src/js/main.js b/src/js/main.js index c76b3d7..fc007e1 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -238,21 +238,21 @@ function initWhiteboard() { // save image as png $("#saveAsImageBtn").click(function () { - var imgData = whiteboard.getImageDataBase64(); - - 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); + whiteboard.getImageDataBase64(function (imgData) { + var w = window.open("about:blank"); //Firefox will not allow downloads without extra window setTimeout(function () { - w.close(); - }, 100); - }, 0); + //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(); + }, 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(); - var webdavaccess = { - webdavserver: webdavserver, - webdavpath: webdavpath, - webdavusername: webdavusername, - webdavpassword: webdavpassword, - }; - webDavHtml.find(".loadingWebdavText").show(); - webDavHtml.find(".webdavUploadBtn").hide(); - saveWhiteboardToWebdav(base64data, webdavaccess, function (err) { - if (err) { - webDavHtml.find(".loadingWebdavText").hide(); - webDavHtml.find(".webdavUploadBtn").show(); - } else { - webDavHtml.parents(".basicalert").remove(); - } + whiteboard.getImageDataBase64(function (base64data) { + var webdavaccess = { + webdavserver: webdavserver, + webdavpath: webdavpath, + webdavusername: webdavusername, + webdavpassword: webdavpassword, + }; + webDavHtml.find(".loadingWebdavText").show(); + webDavHtml.find(".webdavUploadBtn").hide(); + saveWhiteboardToWebdav(base64data, webdavaccess, function (err) { + if (err) { + webDavHtml.find(".loadingWebdavText").hide(); + webDavHtml.find(".webdavUploadBtn").show(); + } else { + webDavHtml.parents(".basicalert").remove(); + } + }); }); }); showBasicAlert(webDavHtml, { diff --git a/src/js/utils.js b/src/js/utils.js index 68b2a07..1e02d15 100644 --- a/src/js/utils.js +++ b/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; - } -} diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js index 6226f79..be1e5ae 100644 --- a/src/js/whiteboard.js +++ b/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("
").join("").split("
").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"; - ctx.fillStyle = fontColor; - fillTextMultiLine(ctx, text, left, top); + + html2canvas(this, { backgroundColor: "rgba(0, 0, 0, 0)", removeContainer: true }).then( + function (canvas) { + console.log("canvas", canvas); + + destCtx.drawImage(canvas, left, top); + textBoxCnt--; + checkForReturn(); + } + ); }); - var url = copyCanvas.toDataURL(); - return url; + function checkForReturn() { + if (textBoxCnt == 0) { + var url = copyCanvas.toDataURL(); + callback(url); + } + } + checkForReturn(); }, getImageDataJson() { var sendObj = [];