How to drag and drop image into a div and save that div's new content as png?-CodePudding

I have a div consisting of two divs. div1 has a yellow background and a black border and under it is div2 containing an image.

I want to drag and drop that image into div1 and save all of it as a png.

The problem is that the saved image contains only the content of div1 without the dropped image. I want to save the content of div1 with the image also.

This is my code so far:

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

function dragStart(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragDrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var parent = ev.target.parentNode;
  ev.target.appendChild(document.getElementById(data));
}
$(document).ready(function() {
  var element = $("#contentImage"); // global variable
  var getCanvas; //global variable
  html2canvas(element, {
    onrendered: function(canvas) {
      getCanvas = canvas;
    }
  });

  $("#saveAsPNG").on('click', function() {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#convertToPNG").attr("download", "your_image.png").attr("href", newData);
  });
});

.div {
  width: 200px;
  height: 400px;
}

.div1 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-style: solid;
  border-color: black;
}

.div2 {
  width: 200px;
  height: 200px;
}

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<!DOCTYPE HTML>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>

<body>
  <div >
    <div  ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage">
    </div>
    <div  draggable="true" ondragstart="dragStart(event)">
      <img id="img2"  src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160">
    </div>
    <br><br>
    <a id="saveAsPNG" href="#">convert to image</a>
  </div>
</body>

</html>

CodePudding user response：

There is nothing wrong with your drag and drop code. The problem is with how html2canvas is being implemented. You are calling html2canvas as soon as the page is ready, and so there is obviously no image in div1.

See the accepted answer here for information how to use html2canvas properly.

I have made some changes to your code (changed the background color of the source div to pink and the color of the image to green). Click on the "convert to image" and a yellow image appears below. Now drag the green image to the yellow div, and then click "convert to image" again. A second yellow image appears next to the first with the green box included.

In this way, you can see that two images have been created. One without a green box and one with a green box.

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

function dragStart(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragDrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var parent = ev.target.parentNode;
  ev.target.appendChild(document.getElementById(data));
}
$(document).ready(function() {
  $("#saveAsPNG").on('click', function() {
    let element = $("#contentImage");
    html2canvas(element, {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      }
    });
  });
});

.div {
  width: 500px;
  height: 200px;
  border: solid 2px black;
  padding: 20px;
}

.div1 {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: solid 2px black;
}

.div2 {
  width: 200px;
  height: 100px;
  background-color: pink;
  border: solid 2px black;
}

.image1 {
  width: 50px;
  height: 50px;
  background-color: green;
  border: solid 2px black;
}

<!DOCTYPE HTML>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>

<body>
  <a id="saveAsPNG" href="#">convert to image</a>
  <div >
    <div  ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage">
    </div>
    <div  draggable="true" ondragstart="dragStart(event)">
      <img id="img2"  src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160">
    </div>
  </div>
</body>

</html>