Why is the image is not part of the div ? How to add it to DOM?

Question

I have only a button and an image inside the "rightcontainer" div. When I click on the button, it should take a screenshot to the div. It does but the image is not showing only the words. I read about that, and I think because the image is not in the div DOM. How can I make the image part of the div so that it appears in the screenshot as well.

$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
  html2canvas(document.getElementById("container"), {
    onrendered: function(canvas) {
      var tempcanvas = document.createElement('canvas');
      tempcanvas.width = 350;
      tempcanvas.height = 350;
      var context = tempcanvas.getContext('2d');
      context.drawImage(canvas, 112, 0, 288, 200, 0, 0, 350, 350);
      var link = document.createElement("a");
      link.href = tempcanvas.toDataURL('image/jpg'); //function blocks CORS
      link.download = 'screenshot.jpg';
      link.click();
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<button onclick="takeScreenShot()">Snapshot</button>
<div id="container">
    <div id="leftmenu">
      Left Side
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      Drag----------->
            &
      Click Snapppppppppppppp </br>
        
    </div>
    <div id="rightcontainer">
        Right Side
        <img id = "conn" src="https://static.pexels.com/photos/39803/pexels-photo-39803.jpeg" width="500px" ;>

    </div>


</div>

Toastrackenigma · Accepted Answer · 2018-02-24T00:49:50.773

The problem here is that the image is coming from an external website. html2canvas will only process images that come from the same origin as the HTML file, i.e. the same web domain.

A potential workaround to this issue would be to use some kind of proxy, but the best solution is probably to just download the image and serve it along with your website.

You can read more on html2canvas's documentation website (this issue is listed under the "Limitations" section), and if you are interested in using a proxy to resolve this matter, they are discussed here.

Secondly, you're using an old version of html2canvas. Download the latest version, and then replace your takeScreenShot function with this version (as the new API uses promises, rather than callbacks):

var takeScreenShot = function() { 
    html2canvas(document.getElementById("container")).then(canvas=>{
        var link = document.createElement("a");
        link.href = canvas.toDataURL('image/jpg');
        link.download = 'screenshot.jpg';
        link.click();
    })
}

This will create the correct output (you can test by doing document.body.appendChild(canvas) before the var link line), but you won't be able to download it, as the canvas will be "tainted". To fix this, you'll have to run the site off some kind of local server (if you're not already), for example XAMPP.

Thanks a lot. I tried to download the picture and add it to my directory. But still the same problem. Thanks again — codeDojo, Feb 23 '18 at 23:58
Are you getting any errors in your browser console? Also, try clearing cache and reloading the page. — Toastrackenigma, Feb 24 '18 at 00:19
No, that is the weird thing!!! Everything is perfect and the image is being taken and downloaded but only the words inside the div are shown but not the image. — codeDojo, Feb 24 '18 at 00:24
@codeDojo I've got it to work for me, by running it off a local server and updating the version of html2canvas being used - see my latest edit to the answer. — Toastrackenigma, Feb 24 '18 at 00:50

Why is the image is not part of the div ? How to add it to DOM?

1 Answers1