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

Question

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

我正在尝试从 canvas 中获取图像，该图像在 firefox 中工作正常，但在 chrome 中相同的代码返回一个空图像。

铬合金：

firefox：

知道我做错了什么吗？

我已经浪费了我的晚上，但我在 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以防图像尚未准备好（即使它应该准备好），但无论如何都没有运气。

任何想法都非常感谢。

Answer 1

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

我注意到其他一些 web 应用程序在那个 chrome 实例中也没有工作（比如 whatsapp 和 google ads 帐户）所以在 chrome 中有些东西被严重破坏了