Error: Event {isTrusted: true, type: 'error', target: img, currentTarget: img, eventPhase: 2, …}

[indraraj26]

Use case: description, code

nojsfiddle
Repo: https://github.com/indraraj26/dom-to-image-test
Steps:

1. clone repo
2. npm i
3. open index.html

Expected behavior

It should throw proper error code to understand the underlying issue.

Actual behavior (stack traces, console logs etc)

It is throwing error when you try to convert large dom

Library version

"dom-to-image": "^2.6.0"

Browsers

• Chrome 49+
• Firefox 45+

[nidelemonya]

I also encountered this problem, because the width of the html content exceeds the width of the canvas, I hope it helps you

[indraraj26]

So how did you solve the issue?

[Qiuzero]

how did you solve it？

[nicwilliams1]

I had the same issue and it was caused by some invalid html within the element I was trying to render. I was generating this html programatically, and missed closing a style tag (see the attached image, the circled double quote was missing). I think this resulted in that element overflowing the parent container as mentioned by @Bruce-shy, which caused this error. It looks like this type of error can be triggered by a few different things, but it's worth checking your source html to see if there anything weird like in my case, particularly looking for stuff that could cause the content of the element you are trying to convert to overflow.

If it helps, I was able to troubleshoot this by just switching the target element of my render function to different children of the container I was attempting to render originally (the one that gave this error). I found that each child rendered fine, until I tried the container that had this html error. Once I narrowed it down, I noticed that element was overflowing, and located the missing endquote.

[sujiangyin]

Use case: description, code

nojsfiddle Repo: https://github.com/indraraj26/dom-to-image-test Steps:

1. clone repo
2. npm i
3. open index.html

Expected behavior

It should throw proper error code to understand the underlying issue.

Actual behavior (stack traces, console logs etc)

It is throwing error when you try to convert large dom

Library version

"dom-to-image": "^2.6.0"

Browsers

• Chrome 49+
• Firefox 45+

had the same issue，how did you solve it？

[areyes21]

nothing here?

[richex-cn]

I tried this PR #346 , After replacing the picture with one with the Access-Control-Allow-Origin: * header, everything in the reproduction in this issue worked fine.

[wyking1997]

I have the same issue and I don't know what is going on. I am using the toBlob() function and I ended up adding the library code to my codebase so that I am able to debug this a bit more. The strange thing is that in most cases everything works fine, but for one part of the application it always fails with the above issue. What I was able to figure out is that the toBlob() function is calling the draw(domNode, options), which in turn is calling the makeImage(uri). This function is creating an html img element, I think the error appears when this image tries to load since the onload handler is not called at all. Do you have any insights as for what can be the issue here?

[foolstar3]

When i tried to use toPng() to get image url, it run into an error.
Here is my code, what should i do?
codesanbox
Same error as #455

[gcordon]

Let's say the exported id is equal to exg, and the width and height are 1200 and the remaining 1200,

But if this inner div exceeds itself, it will cause this problem

You can start by trying to remove the div inside that is causing the overflow problem