How to store result of drag and drop as a image
- by Jimmy
I want to take the screenshot of the result of drag and drop, but I don't know how to do.
Actually, I found 2 javascript and using HTML5 such as html2canvas and canvas2image.
I am now combining them together, but it's still meet some problem with the canvas2image.
Please help me solve this problem if you have same experience, thank you a lot.
Please help me, I've been stock here for days.
Drag and drop code.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#draggable2" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
Image generation code
<script>
window.onload = function() {
function convertCanvas(strType) {
if (strType == "JPEG")
var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
if (!oImg) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
oImg.id = "canvasimage";
oImg.style.border = oCanvas.style.border;
oCanvas.parentNode.replaceChild(oImg, oCanvas);
}
function convertHtml(strType) {
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
convertCanvas(strType);
window.open(img);
}
document.getElementById("html2canvasbtn").onclick = function() {
convertHtml("JPEG");
}
}
</script>
HTML code
<body>
<h3>Picture:</h3>
<div id="draggable">
<img src='http://1.gravatar.com/avatar/1ea64135b09e00ab80fa7596fafbd340? s=50&d=identicon&r=R'>
</div>
<div id="draggable2">
<img src='http://0.gravatar.com/avatar/2647a7d4b4a7052d66d524701432273b?s=50&d=identicon&r=G'>
</div>
<div id="dCanvas">
<canvas id="droppable" width="500" height="500" style="border: 2px solid gray" class="ui-widget-header" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>
</body>
