Save content of div with one button click

Question

I have a .div1 and .div2. .div2 contains an image.

I want to drag and drop image from .div2 to .div1 and save the content of .div1 as png.

The problem is that I always have to click twice on the "convert to image" button.

I want to do it only once.

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");
        ev.target.appendChild(document.getElementById(data));

    $(document).ready(function() {
       $("#convertToImage").on('click', function() {
            let element = $("#contentImage");
            html2canvas(element, {
                  onrendered: function(canvas) {
                  getCanvas = canvas;
                  }
             });

            var imgageData = getCanvas.toDataURL("image/png");
            var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
            $("#convertToImage").attr("download", "your_image.png").attr("href", newData);

         });

    });
    }

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

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

.image1 {
  width: 50px;
  height: 50px;
  margin: auto;
  display: block;
  background-color: black;
  border: solid 2px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage">
</div>
<div class="div2" draggable="true" ondragstart="dragStart(event)">
    <img id="img2" class="image1" src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160">
 </div>
 <a id="btn-Convert-Html2Image" href="#">convert to image</a>

snippet is not working becuz jquery is not included in it `Uncaught ReferenceError: $ is not defined` — Chris G, Sep 30 '22 at 13:09
You are not handling the asynchronous nature of this rendering process correctly. What you are trying to do _after_ the `html2canvas()` call, actually belongs _into_ the `onrendered` callback function. — CBroe, Sep 30 '22 at 13:33
Adding jquery and fixing the button id then gives `html2canvas is not defined` — freedomn-m, Sep 30 '22 at 13:34
Don't complicate things. See this https://stackoverflow.com/a/73992354/5413283 — Dexter, Oct 07 '22 at 20:48
Thank you ... STEP 3 in the final answer was exactly what I needed — chessrealm, Oct 11 '22 at 08:47

Save content of div with one button click

0 Answers0