Client side exports fail to render images (PNG, JPG & PDF) about highcharts-export-clientside HOT 8 CLOSED

I think the issue is with canvg. The error in Firefox might be related to canvg/canvg#349 ?
I don't have that error with WebKit but same symptoms (white/black image).

Is your image URL relative or absolute? It might be because of CORS restrictions.

from highcharts-export-clientside.

OK, I think I have the root cause. Thing is, rendering from canvg goes asynchronous when there are resources. (or something like that.)

I'll have to work on this to make it work.

Beware that you'll still have to use images from a “CORS-safe” source (either the same server of the webpage or a one that handles CORS request) or the canvas will be tainted, making the export impossible.

from highcharts-export-clientside.

Thanks for the updates, and apologies for not getting back to you earlier.

The source of the images I'm using is the same server as the webpage, like ... "this.renderer.image('//myServer.com/myImage1.png', 20, 330, 32, 45).add();".

I also tried a base64 encoded string ...
var imgpng = 'data:image/png;base64,iVBORw ... blah, blah, blah ... H/yFnMhwAAAABJRU5ErkJggg==';
and
this.renderer.image(imgpng, 20, 330, 32, 45).add();

Using the base64 string, I can export to the highCharts export server, but I sometimes get a 'Oops ...Your SVG is too big' error.

from highcharts-export-clientside.

I thought about the issue and I can pin-point what's happening.

This plugin uses HighCharts export module to retrieve the SVG of the current chart. Then, it passes it to canvg (or the canvg version of HighCharts) to convert the SVG to a canvas which in turn will give a rasterized image (PNG/JPEG). I didn't dig far in this library so maybe there's a asynchonous call there, but my bet is that every canvas' call is synchronous but the rendering isn't. Which would totally make sense.

What that means is that when you make a call like drawImage() on a canvas context, it will tell you if it'll be able to render it, but hasn't yet. Thus the empty image.

You can either try to patch it yourself (see renderCallback there: https://github.com/gabelerner/canvg ) or wait for me to fix it (no ETA, might be tomorrow, might be in a month, sorry).

I quickly thought that I should decouple rendering from the download part. Heh, lazy me, it's biting me in the a** now.

from highcharts-export-clientside.

I'm not a strong Javascript man ... I'm afraid my background is Windows, so I think I would struggle with a patch. I'm grateful that you would build this plugin in the first place, so I am happy to accept your ETA. as for 'lazy me, it's biting me in the a** :' ... I am certainly guilty of that, too.

I'll still put you at the top of my 'people to buy a beer' list. I think a lot of HighCharts users will want to use your plugin. In fact, it should be just added to HighCharts out the box.

Thanks.

PS do you have any issues with me updating the HighCharts forum post to say the issue is 'In Hand' ?

from highcharts-export-clientside.

So I think I fixed your issue. I made the rendering asynchronous.

I also did some test with your jsFiddle here: http://jsfiddle.net/JohnnyRS/xa8wke0b/3/
But it doesn't work as is since it's an external image and that taints the canvas (see above).

This is the error it spit in the console:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

But I updated it and used the base64 equivalent: http://jsfiddle.net/xa8wke0b/4/

And now it works except that images are not scaled up. If that's an issue for you, you can set exporting.scale option to 1.

I obviously don't have a problem with you saying anything on HighCharts forums or SO. Could you please refer to this issue in your answer?

Also, let me know how it goes. I'll publish a new release soon after.

from highcharts-export-clientside.

That’s fantastic news.

The fiddle you prepared works flawlessly, for me. I exported all the image types and each one showed the image on the final render.

Thank you for taking the time to look into this and also for putting together such a useful plugin. Will update the HighCharts forum, and also edit the SO question I posted re the ‘Type C Error’ and point out how the plugin renders images.

Thanks again,

John.

From: A---- [mailto:[email protected]]
Sent: 04 May 2015 13:03
To: A----/highcharts-export-clientside
Cc: jonnysilver
Subject: Re: [highcharts-export-clientside] Client side exports fail to render images (PNG, JPG & PDF) (#1)

So I think I fixed your issue. I made the rendering asynchronous.

I also did some test with your jsFiddle here: http://jsfiddle.net/JohnnyRS/xa8wke0b/3/
But it doesn't work as is since it's an external image and that taints the canvas (see above).

This is the error it spit in the console:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

But I updated it and used the base64 equivalent: http://jsfiddle.net/xa8wke0b/4/

And now it works except that images are not scaled up. If that's an issue for you, you can set exporting.scale option to 1.

I obviously don't have a problem with you saying anything on HighCharts forums or SO. Could you please refer to this issue in your answer?

Also, let me know how it goes. I'll publish a new release soon after.

—
Reply to this email directly or view it on GitHub https://github.com/A----/highcharts-export-clientside/issues/1#issuecomment-98688685 .Image removed by sender.

from highcharts-export-clientside.

Glad it works. I'll do some more extensive testing and do a proper release later this week.

from highcharts-export-clientside.