Canvas.toDataUrl() returns Chrome 浏览器中的黑色图像

Question

这是 fiddle： https://jsfiddle.net/qcnfaupL/12/

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

chrome:

火狐：

知道我做错了什么吗？

我已经浪费了一个晚上，但我在 chrome 中找不到与此问题相关的任何提及，同样我不明白为什么代码不起作用。

以防万一，我在 Mac（大苏尔，v11.1）

这是上面 fiddle 的完整代码：

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 修复了它¯\_(ツ)_/¯

我注意到其他一些网络应用程序在 chrome 的那个实例中也没有工作（比如 whatsapp 和 google 广告帐户）所以 chrome 中的某些东西严重损坏

Canvas.toDataUrl() returns Chrome 浏览器中的黑色图像

Canvas.toDataUrl() returns black image in Chrome browser

javascript

html5-canvas

html2canvas