WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix text to png

This commit is contained in:
raphael 2020-05-13 14:19:59 +02:00
parent 1c664a810e
commit f49542adea
5 changed files with 78 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

61
src/js/main.js
View File

@ -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, {

9
src/js/utils.js
View File

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

35
src/js/whiteboard.js
View File

@ -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";
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 = [];