Dom-to-image: toPng and toBlob Not working in Edge (Error)

[Burkazoid]

I'm experiencing errors on Edge when attempting to use toBlob or toPng. Running the following jsfiddle gives me the "something went wrong" error: jsfiddle

Using Microsoft Edge 38.14393.0.0.

Works as expected in other Chrome and Firefox.

[kapyaar]

change your fiddle to have
console.error('oops, something went wrong!'+ error);

you will most likely find the error is DomException 18. This is likely because the canvas is considered tainted by the time a foreignObject tag is added, and toDataUrl() wont work.

[Burkazoid]

@kapyaar console.error('oops, something went wrong!', error) outputs the error event object along with the message, but I can't find any useful information in it - perhaps somebody else might be able to read this better than me.

If your assumption is correct, does this mean Edge is completely unsupported?

[kapyaar]

I have been fooling around with this issue for a week now. I posted questions, talked to some experts, etc, and even posted a bounty on SO. :) If you look at html2canvas, it uses the same approach, based on Promise, but the svg returned does not have a foreignObject tag in it. Which makes it possible to run dataUrl request on the canvas. The downside is, that plugin misses out on certain css elements such as clipping hidden overflow content, border, etc. So to answer your question, likely, an unfortunate "YES". I am not familiar with svg in detail. Hopefully the author will look into this. A lot of folks love this plugin. :)

[Burkazoid]

@kapyaar Thanks for the info. Damn, that's disappointing if so. Let's hope it can be resolved somehow :)

[tsayen]

Hi. Unfortunately, I don't have MS Edge (I'm on Ubuntu), so I currently can't test on it.

[tsayen]

If you post the stacktrace you get maybe we can figure something out

[vabanagas]

Here is the output that is given in MS Edge for the jsfiddle posted by @jamesburke-examtime

Console Log.txt

[RichWK]

I'm getting the same problem with toJpeg, as well. Here's the output for that same jsfiddle, but using jpeg instead:

domtoImageJpegExample.txt

[kapyaar]

It does not matter jpg or png. All of them uses toDataUrl() function. This gets blocked if the browser thinks the canvas is tainted.

[RichWK]

It's working for me in Firefox + Chrome though, so does that mean Edge has a flawed interpretation of canvas tainting?

[AvanishKumar008]

@kapyaar @tsayen Nothing is working in IE, Edge. Also .toPng and .toJpeg not working in iPad and iPhone. What is next step for it. I need it very urgent bases so please help me. Your work is awesome but i am facing this issue at few places. In ipad and iphone i convert svg to png. Now working in both but it's a temporary solution. In Edge and IE not working. First i get error Promise is undefined. When i add pollyfill.js then new error is there oops, something went wrong! InvalidStateError.

[nextglory]

In edge, it errors with "Promise not found...", due to the fact that IE 11 not exposes promise api?

[kapyaar]

Unfortunately the next step (for me) was to switch to another library. All this issues are true, and there is nothing you can do about it as they are browser dependent (canvas and security).

[RichWK]

@kapyaar — out of interest, which library did you switch to? I'm interested to see if there are other options with broader support.

[AvanishKumar008]

i am using HTML2Canvas

[chitgoks]

HTML2Canvas is unreliable. Even the website says it should not be used for production. I think performance-wise this library is better. however, the issue with toDataUrl() prohibits it being used in IE. tsk.

[krilllind]

Maybe this can be looked into for more information about how to solve this problem. I think that if this is a security issue, Chrome and Firefox will probably block this in the future too.

Link to CORS Canvas

[chrisregnier]

I just looked into this more and I've found the general solution here: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

And wrapping the uri in encodeURI will make everything work.

        function makeImage(uri) {
            return new Promise(function (resolve, reject) {
                var image = new Image();
                image.onload = function () {
                    resolve(image);
                };
                image.onerror = reject;
                image.src = encodeURI(uri);
            });
        }

[venkat4541]

@chrisregnier Thanks for sharing the fix. It did work on Edge but I see a lot of strings of %0A scattered across the image. Anyone else have this issue? Please share if anyone could fix it.

[joselu1sc]

@chrisregnier Thanks for sharing the fix. It did work on Edge but I see a lot of strings of %0A scattered across the image. Anyone else have this issue? Please share if anyone could fix it.

I am expering the same issue with Edge.

[GuiRitter]

@chrisregnier Thanks for sharing the fix. It did work on Edge but I see a lot of strings of %0A scattered across the image. Anyone else have this issue? Please share if anyone could fix it.

And I with Chrome. I've removed a few by replacing a string with a line break by two divs, but there's still one between an svg and the end of its containing div, where there should be nothing.

[chrisregnier]

I haven't looked at this in quite a while, but I just did a quick scan through the code and found this being called when serializing svgs in makeSvgDataUri.

function escapeXhtml(string) {
            return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
}

My guess is this is not properly escaping things and should be using the encodeUri method instead.
The encodeUri that I added before may in fact be double encoding things in this case.

[GuiRitter]

I also just realized that stray %0As are causing locally loaded fonts to not be applied. Replacing them by spaces fixes the problem.

[PedroBortolli]

After trying @chrisregnier solution I was able to fix the error caused by the toPng method on MS Edge as well (it already worked perfectly on Chrome and Firefox).

However, even though I don't get an error anymore, the content of the screenshot taken is blank on Edge (and again, it works as expected on Chrome and Firefox). Other than that change, I also did what @GuiRitter suggested to replace that stray for a space by the way, as the encoded URI had messed up things a little and that fixed it.

Does anyone have any clue of what might be happening here? No errors are thrown by the lib and I don't see what could be causing the issue. The page that I am trying to take a screenshot from has a lot of SVGs, images and special fonts by the way (such as fontawesome).

Thanks! :)

[muyexi]

With the fix by @chrisregnier toPng now works on MS Edge, but all the images are missing.

[jbelien]

Same issue here : works fine in Firefox/Chrome but I have a "blank" image on MS Edge 44.
The HTML elements are rendered correctly but the content of the Canvas element (in my case an @openlayers map) is not rendered in the final PNG.
Any idea why ?

[zmzimpl]

With the fix by @chrisregnier toPng now works on MS Edge, but all the images are missing.

Same issue here : works fine in Firefox/Chrome but I have a "blank" image on MS Edge 44.
The HTML elements are rendered correctly but the content of the Canvas element (in my case an @openlayers map) is not rendered in the final PNG.
Any idea why ?

Has anyone solved this problem, I also lost all the pictures~~