'+
'
'+
'
');
imgDiv.find(".xCanvasBtn").click(function() {
_this.imgDragActive = false;
if(_this.tool==="pen") {
_this.mouseOverlay.css({"cursor":"none"});
} else if(_this.tool==="mouse") {
_this.mouseOverlay.css({"cursor":"auto"});
} else {
_this.mouseOverlay.css({"cursor":"crosshair"});
}
imgDiv.remove();
});
imgDiv.find(".addToCanvasBtn").click(function() {
var draw = $(this).attr("draw");
_this.imgDragActive = false;
if(_this.tool==="pen") {
_this.mouseOverlay.css({"cursor":"none"});
} else if(_this.tool==="mouse") {
_this.mouseOverlay.css({"cursor":"auto"});
} else {
_this.mouseOverlay.css({"cursor":"crosshair"});
}
var width = imgDiv.width();
var height = imgDiv.height();
var p = imgDiv.position();
var left = Math.round(p.left*100)/100;
var top = Math.round(p.top*100)/100;
if(draw=="1") { //draw image to canvas
_this.drawImgToCanvas(url,width,height,left,top);
} else { //Add image to background
_this.drawImgToBackground(url,width,height,left,top);
}
_this.sendFunction({"t":"addImgBG", "draw":draw, "url":url, "d":[width,height,left,top]});
_this.drawId++;
imgDiv.remove();
});
imgDiv.draggable();
imgDiv.resizable();
_this.mouseOverlay.append(imgDiv);
},
drawImgToBackground(url,width,height,left,top) {
this.imgContainer.append(''+
' '+
' '+
''+
'
'+
''+
''+
''+
content["username"]+'
');
}
} else {
_this.cursorContainer.find("."+content["username"]).remove();
}
} else if(tool==="undo") {
_this.undoWhiteboard(username);
}
if(isNewData && (tool==="line" || tool==="pen" || tool==="rect" || tool==="circle" || tool==="eraser" || tool==="addImgBG" || tool==="recSelect" || tool==="eraseRec")) {
content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
content["username"] = content["username"] ? content["username"] : _this.settings.username;
_this.drawBuffer.push(content);
}
},
userLeftWhiteboard(username) {
this.cursorContainer.find("."+username).remove();
},
getImageDataBase64() {
_this = this;
var width = this.mouseOverlay.width();
var height = this.mouseOverlay.height();
var copyCanvas = document.createElement('canvas');
copyCanvas.width = width;
copyCanvas.height = height;
var ctx = copyCanvas.getContext("2d");
$.each(_this.imgContainer.find("img"), function() {
var width = $(this).width();
var height = $(this).height();
var p = $(this).position();
var left = Math.round(p.left*100)/100;
var top = Math.round(p.top*100)/100;
ctx.drawImage(this,left,top,width,height);
});
var destCtx = copyCanvas.getContext('2d');
destCtx.drawImage(this.canvas, 0, 0);
var url = copyCanvas.toDataURL();
return url;
},
getImageDataJson() {
var sendObj = [];
for(var i=0;i