Search code examples
javascripthtml5-canvashtml2canvas

Canvas.toDataUrl() returns black image in Chrome browser

Here is the fiddle: https://jsfiddle.net/qcnfaupL/12/

I'm trying to get an image out of a canvas, which works fine in firefox but in chrome the same code returns an empty image.

chrome:

enter image description here

firefox:

enter image description here

Any idea what I'm doing wrong?

I've already wasted my evening but I can't find any mentions related to this problem in chrome and equally I can't see why the code shouldn't work.

In case if it matters, I'm on Mac (Big Sur, v11.1)

Here is the full code from the fiddle above:

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)
});

Tried setTimeout before requesting toDataURL in case the image is not yet ready (even though it should be), but no luck anyway.

Any thoughts are much appreciated.

Solution

  • reinstalling chrome fixed it ¯\_(ツ)_/¯

    I've noticed some other web apps didn't work in that instance of chrome neither (like whatsapp and google ads account) so something was badly broken in chrome