Basically I am pasting images in a div area. these images are draggable and resizable. once the images are edited i need to save the final content into one final image.
I have done the part where images need to be pasted, resized and dragged. Only part remaining is to save this content in one single image.
Canvas seems to be the possible solution. However the div needs to be converted to a canvas. How can that be done ??
HERE IS THE CODE :
Here is the code
$(function () {
$("#editor-box").bind("paste", function (ev) {
var $this = $(this);
var original = ev.originalEvent;
var file = original.clipboardData.items[0].getAsFile();
var reader = new FileReader();
reader.onload = function (evt) {
var result = evt.target.result;
var arr = result.split(",");
var data = arr[1]; // raw base64
var contentType = arr[0].split(";")[0].split(":")[1];
// this needs to post to a server route that can accept raw base64 content and save to a file
$.post("/echo/html/", {
contentType: contentType,
data: data
});
$this.append("");
};
reader.readAsDataURL(file);
});
});
$(document).ready(function() {
$("#editbutton").click(function(){
var val = 0;
$("img").each(function () {
$(this).attr('id', 'img' + val);
$('#img' + val).resizable().parent().draggable();
val = val+1;
});
});
$("#savebutton").click(function(){
/*need to convert the HTML to Canvas and then save the image. OR directly have the div contents saved as image*/
});
});
</script>
</head>
<body>
<div id="editor-box" contenteditable="true">
</div>
<div><input type="button" id="editbutton" value="drag" /></div>
<div><input type="button" id="savebutton" value="save" /></div>
</body>
