Drag images over canvas and save png

Question

I'm creating an application with the image of a christmas tree that is placed in a canvas element , where there is the possibility of drag images over it . After the tree is decorated with the draggable images, the user has to be able to save the entire composition (canvas + images) as a PNG file . The problem is: when I drag the images to the canvas, they are hidden behind the christmas tree. Can you please help me to fix it?

Here's the code:

<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');

   var imageObj=new Image();
        imageObj.onload=function(){
            ctx.save();
   ctx.drawImage(this,0,0,canvas.width,canvas.height);
            ctx.restore();
  }
  
   imageObj.src="bg.png";
        
            // 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>  
    
 <style type="text/css">
    
 body {
   text-align: center;
}

#wrapper {
   text-align: left;
   width: 870px;
   height:566px;
   margin-left: auto;
   margin-right: auto;
}

#options{
 width: 70px;
 height:566px;
 float:left;
}

#options img {
 margin-bottom: 15px;
}

#canvas{
 width:800px;
 height:566px;
 float:left;
 background-image:url(../images/bg.png);
}

    </style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<div id="options">
        
          <img id="img1" draggable="true" ondragstart="drag(event)" src='estrela.png'>
            <img id="img2" draggable="true" ondragstart="drag(event)" src='bola.png'>
            <img id="img3" draggable="true" ondragstart="drag(event)" src='sino.png'>
            <img id="img4" draggable="true" ondragstart="drag(event)" src='bota.png'>
            <img id="img5" draggable="true" ondragstart="drag(event)" src='anjo.png'>
            <img id="img6" draggable="true" ondragstart="drag(event)" src='laco.png'>
            
        </div>

        <canvas id="canvas" onDrop="drop(event)" onDragOver="allowDrop(event)" width="800" height="566"></canvas>
        
<input type="button" onClick="convertCanvasToImage()" value="Gerar Imagem" style="float:right"/>

</body>

Thanks!

Maybe position the canvas element before all the img elements? — markE, Dec 14 '14 at 02:22

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Check out this post which allows you to drag images from a toolbar and drop them on the canvas:

HTML5 drag and drop images from a toolbar to a canvas

When you're done creating your tree, you can save the canvas as an image by converting it to an image and displaying the image in a new browser tab. The user can then right-click-save that image to their local drive:

$("#save").click(function(){

    var html="<p>Right-click on image below and Save-Picture-As</p>";

    html+="<img src='"+canvas.toDataURL()+"' alt='image from canvas'/>";

    var tab=window.open();

    tab.document.write(html);

});

Some browsers (Chrome, Firefox) even allow the user to right-click the canvas element itself and save it as an image.

thanks a lot for your help! It's running well and I've just added a script that allows to save the image clicking on a button, but it only works on Chrome. Here's the source: http://www.codepool.biz/tech-frontier/html5/how-to-use-javascript-to-save-canvas-data-in-chrome.html — Rúben Oliveira Nunes, Dec 15 '14 at 03:21

Drag images over canvas and save png

1 Answers1