Solution 1 :

It looks like an external source of content. You should set the allowTaint option to true.

html2canvas(input, { allowTaint: true }).then(...);

Solution 2 :

Just wanted to add to the answer above.

It achieves exactly what I want, but you just need to set useCORS to true in the options as well

html2canvas(input!, { allowTaint: true, useCORS: true }).then(...)

, otherwise you’ll get

Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

Problem :

I’m creating a booking reference for the user to download after successfully making a booking. It looks like this in the browser:
enter image description here

However, after using html2canvas to get a screenshot of the component in React, I get this:
enter image description here

I suspect the issue has to do with the fact that the static map’s use is protected by an API key, causing issues to render the image in an external view.

This is the callback that fires on hitting the share button, which for now just downloads the png (which is then converted to pdf using jsPDF):

  const share = () => {
    const input = document.getElementById("trip-summary");
    if (input === null) return;
    html2canvas(input!).then((canvas) => {
      var image = canvas
        .replace("image/png", "image/octet-stream"); 

        const pdf = new jsPDF();
        // @ts-ignore
        pdf.addImage(image, "PNG", 0, 0);"download.pdf");


Comment posted by AlePouroullis

Thank you so so much!!! One slight change needed to be made – you have to set useCORS to true in the options as well, otherwise you can’t download the file to local storage. This saved me many hours of trouble.