How to store result of drag and drop as a image

html, html2canvas, javascript, jquery

Solution

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/

Problem

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> ```

Original source

Related problems