jsGanttImproved / jsgantt-improved

Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required.
https://jsganttimproved.github.io/jsgantt-improved
Other
483 stars 249 forks source link

html2canvas does not export red lines #340

Open CSharpSeraph opened 3 years ago

CSharpSeraph commented 3 years ago

Hi everybody,

this is not exactly a jsgantt bug, but maybe someone had the same issue:

exporting the graph's div in html2canvas does not render the red arrows.

Any ideas / workarounds?

thanks!

mariohmol commented 3 years ago

The arrows are generated in a different div.. in the bottom after the chart.. have you seen this?

CSharpSeraph commented 3 years ago

I found out. Actually the problem is that the div is set as Hidden:

if you comment the line after this:

f (this.vEvents.onLineContainerHover && typeof this.vEvents.onLineContainerHover === 'function') { events_1.addListener('mouseover', this.vEvents.onLineContainerHover, vTmpDiv2); events_1.addListener('mouseout', this.vEvents.onLineContainerHover, vTmpDiv2); } // vTmpDiv2.style.visibility = 'hidden'; / THAT ONE /

Works like a charm. I did it only when I needed to export the b64, not during normal usage.

mariohmol commented 3 years ago

alright!!

and how are u using html2canvas? maybe we can incorporate this process in the docs on in code!

thanks

CSharpSeraph commented 3 years ago

It is quite easy indeed,

you just call

html2canvas( [MAIN DIV CONTAINING THE CHART] ).then(function (canvas) {

then you call toDataURL:

imageData = canvas.toDataURL("image/png");

it gives you the base64 and you can embed it in an <img, send to an api to convert to jpg, and so on ...

mariohmol commented 1 year ago

@SeanBunch