Chrome html2canvas 生成的浏览器空白图像，但适用于 Chrome 隐身模式

Question

我使用 html2canvas 打印图像的代码适用于除 Chrome 以外的所有浏览器。它甚至适用于 Chrome 隐身模式，但不适用于普通 Chrome 浏览器。同样对于不使用打印功能的新用户来说，它似乎可以在他们正常的 Chrome 浏览器上运行，但使用该功能的老用户突然看到一个空白页面。这是某种缓存问题吗？调试后，我发现 html2canvas 生成的 canvas 正在捕获错误尺寸的图像，即使为我的组件加载了整个 DOM 也是如此。这是我的一段代码：

html2canvas(inputEl, {useCORS: true, allowTaint: false}).then(canvas => {
  const [canvasHeight , canvasWidth] = [canvas.height, canvas.width];
  const imgData = canvas.toDataURL("image/png");
  let canvasImage = new Image();
  canvasImage.onload = onCanvasLoad.bind(this, canvasImage, {...canvasOptions, pdfDocument, canvasHeight, canvasWidth});
  canvasImage.src = imgData;
});

将 CORs 设置为 true 也没有帮助。

即使主站点上的示例也无法正常工作 - 使用 https://html2canvas.hertzen.com/ 检查 -> 右下角 - 照片 - 捕获。

问题也贴在这里 - https://github.com/niklasvh/html2canvas/issues/2804

请大家指点一下。

规格：

html2canvas 测试版本：1.0.0-rc.7
浏览器和版本：Chrome - 97.0.4692.71（正式版）(x86_64)

Answer 1

问题已解决。请关注同一主题 - Click here

添加以下更改帮助我解决了问题：

function fnIgnoreElements(el) {
  if (typeof el.shadowRoot == 'object' && el.shadowRoot !== null) 
    return true
}

html2canvas(document.querySelector("#capture"), { ignoreElements: 
  fnIgnoreElements }).then(canvas => {
    document.body.appendChild(canvas)
});

Chrome html2canvas 生成的浏览器空白图像，但适用于 Chrome 隐身模式

Chrome Browser Blank Image generated by html2canvas but works on Chrome Incognito Mode

google-chrome

canvas

html2canvas