CODEWITHSUNDEEP
javascripthtmlhtml2canvasscreen-capture
Ranjit T
Ranjit T

Reputation: 53

Taking a Screenshot of Webpage

I would like to take screenshot of webpages and let the users download as PNG files. my code is working fine, but it is not capturing some image elements.

What am I doing wrong.

Here is the code

<!-- https://github.com/niklasvh/html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/html2canvas.min.js"></script>
<script>
function capture () {
  html2canvas(document.body).then((canvas) => {
    let a = document.createElement("a");
    a.download = "ss.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
  });
}
</script>
<input type="button" value="Capture" onclick="capture()"/>

And the results from this code is this capture enter image description here

But my website looks kind of like this, clearly you can see what is missing

enter image description here

Upvotes: 1

Views: 323

Answers (1)

Victor David
Victor David

Reputation: 167

It looks like it is related to CORS issue.

To ensure it is a CORS issue you should check if you have any errors in your console mentioning CORS problem.

You should ensure that your images are either host in the same domain as your website. If not, you should ensure server where your images are loaded from is accepting CORS requests.

If it is CORS issue and server accept CORS request you can set option to html2canvas function as below :

html2canvas(el, {
   useCORS: true,
   allowTaint: true 
}).then(() => ...)

Please also ensure that you are loading your images with crossorigin attribute as below :

<img crossorigin src="...">

Upvotes: 1

Related Questions