Careful. Sometimes the callback will not fire.

[ndvbd]

When having this element in the DOM it might never end:

test test test test

(hope you guys see the div dir='ltr')

That's dangerous...

[brcontainer]

Put markup to your html example.

[ndvbd]

I tried... it removes the < and > signs...

[usmonster]

@NadavB please use a jsfiddle or jsbin to actively demonstrate the issue.

(Also, please note that you can include in HTML in comments if you use the markdown syntax, i.e. three backticks above and below your code block. For example:

<div></div>

will show up as

<div></div>

Still, please include a link to a jsFiddle.)

[ndvbd]

Second try:

<div dir='ltr'>test test test test</div>

This blocks the html2canvas

[usmonster]

Everything's fine for me. Please include a link to a jsFiddle

[ndvbd]

1. The problem is this: when you have an HTML with TinyMCE in it, and when one of the buttons (Bold, for example) is pressed, the html2canvas is stuck and never ends.
2. I created a jsfiddle for that - but I just need a CDN holding the html2canvas version 5.01 - is there such?

[usmonster]

You can use http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js .

[ndvbd]

Okay. Here it is: http://jsfiddle.net/ngdzLec2/

Do the follows:

1. Press the I'm Done at the bottom - and see the alert
2. When you press one of the buttons, for example the BOLD button, the I'm Done is not working.

Note that I'm using here TinyMCE version 4.1 ; if you change the TinyMCE version to 4.0, everything works fine. So I assume there is some collision between TinyMCE and Html2Canvas, in the newest version of TinyMCE.

[programmin1]

I'm always seeing the "worked" alert, even after using bold (Firefox 36). What browser breaks?

[ndvbd]

Sorry - I forgot to write it - Chrome

[usmonster]

tl;dr: the gradient TinyMCE is using on pressed buttons isn't (yet) supported--see #469.

---

Looks like a bug, and it also affects IE. I simplified the test case here:
http://jsfiddle.net/ngdzLec2/2/

At first glance there seem to be at least two things going wrong here, only one of which I think is relevant to the actual problem here.

If you look at the JS console log, the message given in the logged Promise rejection is that there was no proxy configured. html2canvas is trying to use a proxy because it thinks the iframe used by TinyMCE is on a different origin, since its src is "javascript:""". This, however, is incorrect behavior according to the same-origin policy, which says that such an iframe inherits its origin from the document that loaded it. In short, it shouldn't even be trying to use a proxy in the first place, in this case. Still, even though the isSameOrigin logic used in the script is a bit naive for [i]frames, upon further investigation this seems to be a red herring. (Note: @niklasvh please let me know your thoughts on my assessment, and whether or not this should be filed as a separate issue.)

The error that actually reaches the rejection handler (the second function passed to .then) and is displayed in the alert box comes from this line:
https://github.com/niklasvh/html2canvas/blob/3b0352/src/lineargradientcontainer.js#L44

The problem here is that the gradient applied to the pressed buttons in TinyMCE uses a named color ("silver" as opposed to hex values), and I haven't yet finished #469, which should handle that... :/ Looks like I have a weekend project. In the meantime, please feel free to follow that issue as the root cause, and close this one.

I'm still a bit curious as to why it completes error-free on Firefox, but it doesn't matter much since the resulting canvas isn't very useful anyway...

(Sorry my analysis is so verbose, I've just been watching Elementary... :)

[ndvbd]

Thanks for investigation!
I'd appreciate it if you could drop a message here when it's ready so I can take the changes.

Btw - it would be nice to add some protection mechanism, so if the canvas can't be rendered - an error callback will be fired (+timeout)

[usmonster]

The way to handle an error is to invoke the script like html2canvas(element, options).then(onRendered, onError), where onError is a function that takes the error ("rejection" in Promise parlance) message. Though note that this won't necessarily tell you when a canvas is rendered incorrectly or incompletely.

Also, you can specify a per-image load timeout (see the imageTimeout option), though an overall timeout isn't (yet) built in... Maybe you can file that as a separate issue? It would be nice to have.

[usmonster]

@NadavB I see how old this is now, but this issue should have been resolved with the patch that was landed a few months back, resolving #469.

Feel free to test it yourself, or verify with the jsFiddle I mentioned before in my Really Long Comment:
http://jsfiddle.net/ngdzLec2/2/

Please close this issue if it's resolved for you. :)

[ndvbd]

@usmonster thanks! Unfortunately, I won't be able to do so anytime soon, so sorry for that....

[schrepel]

I'm also getting promise rejected errors when trying to use this to screencap a Google Map, not sure how to fix the issue. See our test page.