“可能无法导出被污染的画布".在S3存储桶上设置跨原点后，问题仍然存在 [英] "Tainted canvases may not be exported" issue still present after setting cross-origin on S3 bucket

问题描述

下面的代码应使用html2canvas库将html转换为pdf，然后下载，但显示此错误:

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

无法在"HTMLCanvasElement"上执行"toDataURL":可能无法导出污染的画布

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

在S3存储桶上允许跨原点放置后，问题仍然存在.

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");
            }
        });

推荐答案

尝试向图像添加crossOrigin属性:

<img src="path/to/s3.jpg" crossorigin>

这篇关于“可能无法导出被污染的画布".在S3存储桶上设置跨原点后，问题仍然存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！