IE 使用 html2canvas 返回空/空白画布答案

【问题标题】：IE returns empty/blank canvas with html2canvasIE 使用 html2canvas 返回空/空白画布
【发布时间】：2019-11-09 03:25:21
【问题描述】：

我正在使用 html2canvas 从我的网站创建一个画布，代码如下。我将使用 jsPdf 作为 PDF 上传到我的服务器的画布。这适用于除 Internet Explorer 之外的所有浏览器（我在 IE 11 中尝试过）。画布已创建，但完全空白。我已经包含了一个 Promise 插件。

我是否需要添加一些额外的东西才能让 IE 工作或使用不同的代码？

html2canvas(document.body, {
    background: '#FFFFFF',
    logging: true,
    onrendered: function(canvas) {      
        var pdf = new jsPDF('l', 'px', [screenWidth, screenHeight]);
        var marginLeft = 0;
        var marginRight = 0;            
        pdf.addImage(canvas.toDataURL("image/jpg"), "jpg", marginLeft, marginRight, screenWidth, screenHeight, null, 'FAST');   
        var finalPDF = btoa(pdf.output());
        var data = new FormData();
        data.append("data", finalPDF);
        var xhr = new XMLHttpRequest();
        xhr.open("post", "uploadPDF.php", true);
        xhr.send(data);
    }
});

编辑

我修复了空白画布。问题在于带有position:absolute; 的元素。在创建 canvas 之前，我将它们切换为 position:relative;，然后在 onrendered: 回调中将它们切换回。

【问题讨论】：

但是在哪里呢？首先通过将画布添加到页面并查看其中的内容来确定是 html2can 还是 jsPDf 的原因。 onrendered(function(can){document.body.appendChild(can);} 如果您看到画布如预期的那样，不是 html2Canvas 的错误，请继续此类测试，直到找到画布变为空白的点，然后您可以努力寻找解决方案。
这发生在一系列页面的最后一页上，只是在第二个页面上发现画布已经是空白/空的。在第一页上它工作得很好，所以这很奇怪。现在要检查这些页面之间的差异。

标签： javascript internet-explorer canvas jspdf html2canvas

【解决方案1】：

记录后: true 再设置一个属性 useCORS: true 应该可以解决问题

【讨论】：