All geek questions in one place

How to save drag and drop result as image

I want to take a screenshot of the result of a drag and drop, but I do not know how to do it.

Actually, I found 2 javascript and used HTML5 like html2canvas and canvas2image for example.

Now I will combine them together, but it still encounters the canvas2image problem.

Please help me solve this problem if you have the same experience, thank you very much.

Please help me, I am standing here a few 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>
+4
source share
1 answer

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>

Images must be of the same origin to use toDataURL. The resulting image opens in a new window, as in your code, but you can also add it to the page, save it to disk or upload to the server.

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

+3
source

Source: https://habr.com/ru/post/1441980/

More articles:


All Articles