Comments (8)
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.
Related Issues (20)
- typeerror: c is undefined HOT 1
- Exporting not working in a mobile browser HOT 8
- Need support in exporting highcharts HOT 2
- Support NPM / Browserify HOT 13
- ESLint: global variables
- Misleading information HOT 6
- Support for exporting multiple charts? HOT 5
- Dependency issue
- Support for EDGE HOT 2
- dsahStyle not used in exported chart HOT 4
- canvas-tools.js isn't supposed to be included in a script file?
- xls export does not work anymore HOT 1
- New version of highcharts (V4.2.7) has breaking changes HOT 1
- Whitespace in PDF Export HOT 1
- Highcharts.exporting.USE_TITLE_FOR_FILENAME broken with CSV and XLS HOT 2
- Export to PDF is causing errors and saving a blank PDF
- create a package.json and publish to npm HOT 1
- How do I override to just allow PNG and JPEG? HOT 1
- The file you are trying to open is in a different format than specified by the file extension
- Export chart to excel
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-export-clientside.