Canvas.toDataUrl() 在 Chrome 浏览器中返回黑色图像答案

【问题标题】：Canvas.toDataUrl() returns black image in Chrome browserCanvas.toDataUrl() 在 Chrome 浏览器中返回黑色图像
【发布时间】：2021-06-30 21:18:57
【问题描述】：

这是小提琴： https://jsfiddle.net/qcnfaupL/12/

我正在尝试从画布中获取图像，这在 Firefox 中运行良好，但在 chrome 中相同的代码返回一个空图像。

铬：

火狐：

知道我做错了什么吗？

我已经浪费了我的晚上，但我在 chrome 中找不到与此问题相关的任何提及，同样我看不出为什么代码不应该工作。

如果重要的话，我在 Mac 上（Big Sur，v11.1）

这是上面小提琴的完整代码：

html:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js:

html2canvas(document.querySelector("#capture")).then(canvas => {
let img = canvas.toDataURL("image/jpeg", 1.0)
let imgElement = document.createElement("img");
imgElement.src=img
console.log("img = ", img)
    document.body.append(imgElement)
});

在请求toDataURL 之前尝试setTimeout，以防图像尚未准备好（即使它应该准备好），但无论如何都没有运气。

非常感谢任何想法。

【问题讨论】：

我已经在 Mac/Chrome 89 上测试了您的代码，它运行良好。也许您使用的是较旧的 html2canvas 版本？
@obscure 废话，刚刚尝试在隐身模式下，一切正常。非常感谢你的帮助！我还注意到，在隐身模式下，我无法在 Chrome 中打开 whatsapp web 或 google ads 帐户，这一切都很好。好像我的 chrome 实例中的某些东西严重损坏，要重新安装它。

标签： javascript html5-canvas html2canvas

【解决方案1】：

重新安装 chrome 修复了它¯\_(ツ)_/¯

我注意到其他一些网络应用程序在该 chrome 实例中也无法运行（例如 whatsapp 和 google ads 帐户），因此 chrome 中的某些内容严重损坏

【讨论】：