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

add export functions

Browse Source
This commit is contained in:
rofl256 2018-02-08 21:53:48 +01:00
parent 2eb098d627
commit 9343ca29ec
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -71,11 +71,11 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="saveAsJSONBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn"> <button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
<i class="fas fa-image"></i> <i class="fas fa-image"></i>
<i style="position: absolute; top: 6px; left: 9px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i> <i style="position: absolute; top: 6px; left: 9px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
</button> </button>
<button style="position: relative;" id="saveAsJsonBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn"> <button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
<i class="far fa-file-alt"></i> <i class="far fa-file-alt"></i>
<i style="position: absolute; top: 5px; left: 7px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i> <i style="position: absolute; top: 5px; left: 7px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
</button> </button>

40
public/js/main.js
View File

@ -47,11 +47,25 @@ $(document).ready(function() {
}); });
$("#saveAsImageBtn").click(function() { $("#saveAsImageBtn").click(function() {
alert("yoyo"); var imgData = whiteboard.getImageDataBase64();
var a = document.createElement('a');
a.href = imgData;
a.download = 'whiteboard.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}); });
$("#saveAsJSONBtn").click(function() { $("#saveAsJSONBtn").click(function() {
alert("yoyo"); var imgData = whiteboard.getImageDataJson();
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([imgData], {type: 'text/json'}));
a.download = 'whiteboard.json';
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
}); });
var dragCounter = 0; var dragCounter = 0;
@ -166,6 +180,16 @@ $(document).ready(function() {
}); });
}); });
//Prevent site from changing tab on drag&drop
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
function isImageFileName(filename) { function isImageFileName(filename) {
var ending = filename.split(".")[filename.split(".").length-1]; var ending = filename.split(".")[filename.split(".").length-1];
if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") { if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") {
@ -191,16 +215,6 @@ function isValidImageUrl(url, callback) { //Check if given url it is a vaild img
img.src = url; img.src = url;
} }
//Prevent site from changing tab on drag&drop
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard
if (e.clipboardData) { if (e.clipboardData) {
var items = e.clipboardData.items; var items = e.clipboardData.items;
@ -230,7 +244,7 @@ window.addEventListener("paste", function(e) { //Even do copy & paste from clipb
}, },
success: function(msg){ success: function(msg){
var filename = username+"_whiteboard_"+date+".png"; var filename = username+"_whiteboard_"+date+".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename); whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename); //Add image to canvas
console.log("Image uploaded!"); console.log("Image uploaded!");
}, },
error : function(err) { error : function(err) {