fix text export to img
This commit is contained in:
parent
6b059c4011
commit
50307bb7ee
|
@ -475,7 +475,7 @@ var whiteboard = {
|
||||||
setStrokeThickness(thickness) {
|
setStrokeThickness(thickness) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
_this.thickness = thickness;
|
_this.thickness = thickness;
|
||||||
|
|
||||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||||
_this.sendFunction({ "t": "setTextboxFontSize", "d": [_this.latestActiveTextBoxId, thickness] });
|
_this.sendFunction({ "t": "setTextboxFontSize", "d": [_this.latestActiveTextBoxId, thickness] });
|
||||||
_this.setTextboxFontSize(_this.latestActiveTextBoxId, thickness);
|
_this.setTextboxFontSize(_this.latestActiveTextBoxId, thickness);
|
||||||
|
@ -658,12 +658,12 @@ var whiteboard = {
|
||||||
setDrawColor(color) {
|
setDrawColor(color) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
_this.drawcolor = color;
|
_this.drawcolor = color;
|
||||||
|
|
||||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||||
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
|
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
|
||||||
_this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
|
_this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
handleEventsAndData: function (content, isNewData, doneCallback) {
|
handleEventsAndData: function (content, isNewData, doneCallback) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
@ -747,24 +747,7 @@ var whiteboard = {
|
||||||
copyCanvas.height = height;
|
copyCanvas.height = height;
|
||||||
var ctx = copyCanvas.getContext("2d");
|
var ctx = copyCanvas.getContext("2d");
|
||||||
|
|
||||||
$.each($(".textBox"), function() {
|
$.each(_this.imgContainer.find("img"), function () { //Draw Backgroundimages to the export canvas
|
||||||
var textContainer = $(this)
|
|
||||||
var textEl = $(this).find(".textContent");
|
|
||||||
var text = textEl.text();
|
|
||||||
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
|
|
||||||
console.log(text, fontSize, fontColor, left, top)
|
|
||||||
ctx.font = fontSize+" monospace";
|
|
||||||
ctx.fillStyle = fontColor;
|
|
||||||
ctx.fillText(text, left, top);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$.each(_this.imgContainer.find("img"), function () {
|
|
||||||
var width = $(this).width();
|
var width = $(this).width();
|
||||||
var height = $(this).height();
|
var height = $(this).height();
|
||||||
var p = $(this).position();
|
var p = $(this).position();
|
||||||
|
@ -773,8 +756,25 @@ var whiteboard = {
|
||||||
ctx.drawImage(this, left, top, width, height);
|
ctx.drawImage(this, left, top, width, height);
|
||||||
});
|
});
|
||||||
|
|
||||||
var destCtx = copyCanvas.getContext('2d');
|
var destCtx = copyCanvas.getContext('2d'); //Draw the maincanvas to the exportcanvas
|
||||||
destCtx.drawImage(this.canvas, 0, 0);
|
destCtx.drawImage(this.canvas, 0, 0);
|
||||||
|
|
||||||
|
$.each($(".textBox"), function () { //Draw the text on top
|
||||||
|
var textContainer = $(this)
|
||||||
|
var textEl = $(this).find(".textContent");
|
||||||
|
var text = textEl.text();
|
||||||
|
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
|
||||||
|
console.log(text, fontSize, fontColor, left, top)
|
||||||
|
ctx.font = fontSize + " monospace";
|
||||||
|
ctx.fillStyle = fontColor;
|
||||||
|
ctx.fillText(text, left, top);
|
||||||
|
});
|
||||||
|
|
||||||
var url = copyCanvas.toDataURL();
|
var url = copyCanvas.toDataURL();
|
||||||
return url;
|
return url;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue