1

The code below should convert html to pdf using html2canvas library and then download it, but it's showing this error:

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

The issue is still present after allowing cross-origin on the S3 bucket.

    html2canvas(document.getElementById('compare'), {
            scale: window.devicePixelRatio,
            logging: true,
            allowTaint:true,
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                //window.open().document.write('<img src="'+data+'"/>');
                setTimeout(function () {
                    ele[0].style.display = 'flex';
                    ele[1].style.display = 'flex';
                    if (ele1.length > 0) {
                        ele1[0].style.display = 'block';
                    }
                }, 300);
               pdfMake.createPdf(docDefinition).download("compare.pdf");
            }
        });
fsinisi90
  • 1,138
  • 1
  • 16
  • 45
Tanajee Yedage
  • 11
  • 4
  • **Issue is Resolved** by using below link [Link](https://stackoverflow.com/questions/44865121/canvas-tainted-by-cors-data-and-s3) – Tanajee Yedage Nov 19 '19 at 14:30

1 Answers1

-1

Try to add crossOrigin attribute to the image:

<img src="path/to/s3.jpg" crossorigin>
fsinisi90
  • 1,138
  • 1
  • 16
  • 45