Welcome Guest Search | Active Topics | Sign In | Register

Html To PDF, converting base 64 encoded images. Options
Tim
Posted: Thursday, August 27, 2015 3:54:05 PM
Rank: Newbie
Groups: Member

Joined: 7/9/2015
Posts: 7
I have reviewed other topics in support but I am curious if maybe I found another issue with handling canvas images or base 64 encoded images.

In my implementation, I am generating a spider chart (implemented using chart.js) that is being included on my report.
When I run the conversion of the html most of the spider chart comes through just fine.

The Problem
The chart loses the labels on the different axis.

I don't currently have a way to convert the javascript charts to images in the environment that I am currently working in.

My architecture includes C# MVC, AngularJS and Chart.JS

Thank you in advance for your help on this.
eo_support
Posted: Thursday, August 27, 2015 4:26:02 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

The current version of EO.Pdf only has limited support for Canvas (due to an older version of the browser engine the current version uses). So you might want to consider a SVG based chart solution. We support SVG much better than Canvas.

We are working on switch EO.Pdf to a newer browser engine and hopefully when that is done, it will have the same level of support as other popular browsers.

Thanks!
Tim
Posted: Thursday, August 27, 2015 5:06:05 PM
Rank: Newbie
Groups: Member

Joined: 7/9/2015
Posts: 7
Are there any recommended/supported charting tools that will work with Asp.Net and EO.Pdf ?

Is there an ETA on when EO.Pdf may support base 64 encoded images?

Thank you for your quick response.
eo_support
Posted: Thursday, August 27, 2015 5:27:50 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

I believe Base64 encoded image is already supported. It's the Cavnas that can cause problem. The image is fine.

We do not know much about Charting software, however we are aware of many of our customers using HighChart, which is SVG based and it generally creates good result with our product.

Thanks!
Tim
Posted: Thursday, August 27, 2015 5:35:51 PM
Rank: Newbie
Groups: Member

Joined: 7/9/2015
Posts: 7
I am having problems with the base64 encoded image as well.

Here is an example of the canvas and the image. Both of which lose the labels on the graph.
http://soqonline.net/soq/team/radarchart?respondentId=66&respondentIds=66

Labels being... from 12:00 left to right, Challenge/Involvement, Freedom, Trust/Openness etc.

Thank you for recommending HighCharts, I will take a look at that this evening.

Thanks again for the quick responses!!!!
eo_support
Posted: Thursday, August 27, 2015 9:56:32 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

We have looked into the link. The base 64 image is fine. If you try to save the base 64 image into a separate HTML file and then convert it, you will see all the labels. However if you convert the whole Url directly, then it won't have any labels. This indicates that maybe the charting server is not generating the image with label at all because it's impossible for our HTML to PDF converter to just lose the text in a PNG image since A PNG image is just a compressed bitmap. So it is not possible for us to just not rendering the text but rendering everything else since text is just a portion of the bitmap like everything else in the image.

Thanks
Tim
Posted: Thursday, August 27, 2015 10:44:26 PM
Rank: Newbie
Groups: Member

Joined: 7/9/2015
Posts: 7
Yes, I have experienced that as well. I have found a work around with these libraries which is to use a screen scraper like application to capture the image of the chart, save it to disk and then reference that in my html before conversion as the only way to get the labels. This is hacky and will not work for a production environment.

Here are some other charts I have tried, with the same result that the labels are not displayed.

enhanced d3.js spider chart
http://bl.ocks.org/nbremer/6506614

d3.js spider chart spin off
https://github.com/alangrafu/radar-chart-d3

HighCharts appears to work.

Thank you again for looking into this as well as suggesting HighCharts.
eo_support
Posted: Friday, August 28, 2015 10:21:39 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Thanks for the update. We will also look into this in our end to see if we can find out the root cause of why they do not render labels with our converter.
Tim
Posted: Friday, August 28, 2015 10:27:50 AM
Rank: Newbie
Groups: Member

Joined: 7/9/2015
Posts: 7
Thank you, I ended up keeping chart.js to generate the spider chart. My workaround(hack) was to set the background image of the containing div to have labels.

I was then able to generate the report with the current spider chart on top so it looks right.

There was a bit of pixel pushing involved but it ended up coming out great.

Thanks again for all of your help!
eo_support
Posted: Friday, August 28, 2015 11:36:20 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
You are very welcome. Please feel free to let us know if there is anything else!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.