How to store result of drag and drop as a image

Question

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>

HI, I combine the 2 javascript together, but it's seems there are some problem with the combination. — Jimmy Lin, Oct 25 '12 at 10:34
possible duplicate of [Take a screenshot of a webpage with javascript?](http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript) — JAAulde, Oct 25 '12 at 10:37

Gaël Barbin · Accepted Answer · 2012-11-03T22:58:54.940

A working example, without libraries:

<html>
<head>
    <script>

        function allowDrop(e)
        {
            e.preventDefault();
        }

        function drag(e)
        {
            //store the position of the mouse relativly to the image position
            e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
            e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop  );

            e.dataTransfer.setData("image_id",e.target.id);
        }

        function drop(e)
        {
            e.preventDefault();
            var image = document.getElementById( e.dataTransfer.getData("image_id") );

            var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
            var mouse_position_y = e.dataTransfer.getData("mouse_position_y");

            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
            ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
        }

        function convertCanvasToImage() {
            var canvas = document.getElementById('canvas');

            var image_src = canvas.toDataURL("image/png");
            window.open(image_src);

        }

    </script>
</head>
<body>
    <div style="float:left" >
        <div>
            <img id="img1" draggable="true" ondragstart="drag(event)" src='img1.png'>
            <img id="img2" draggable="true" ondragstart="drag(event)" src='img2.png'>
            <input type="button" onclick="convertCanvasToImage()" value="Generate Image" style="float:right"/>
        </div>
        <canvas id="canvas"  ondrop="drop(event)" ondragover="allowDrop(event)" width="500" height="500" style="border: 1px solid gray"  />

    </div>

</body>

The images must have the same origin in order to use toDataURL. The resulting image is open on a new window, as in your code, but you can also, append it on the page, save on the disk or upload it on a server.

http://fiddle.jshell.net/gael/GF96n/4/

How to store result of drag and drop as a image

1 Answers1