FINALLY Easily Save as JPG, PNG, BMP, GIF, or TIFF

10 posts, 0 answers
  1. Shawn R.
    Shawn R. avatar
    4 posts
    Member since:
    Nov 2008

    Posted 08 Mar 2012 Link to this post

    This was an six hour research project! There were examples that used Inkscape or ImageMagick or some similar external program that needed to be loaded on your server and use a command-line interface to work. This seemed overly messy and resource intensive. One such example is here - http://www.kendoui.com/code-library/dataviz/chart/kendo-ui-chart-export.aspx 

    But there HAD to be a more direct .NET route. Then I stumbled upon this - http://svg.codeplex.com/  and in 6 lines of code (it should have been less) the solution worked!

    Simply download the dll from the website above and use code similar to:

            Dim strSVG As String = "YOUR SVG STRING OUTPUT"
            strSVG = strSVG.Replace("style='font: 12px Arial,Helvetica,sans-serif'", "font-family='Arial,Helvetica,sans-serif' font-size='12'")
            strSVG = strSVG.Replace("style='font: 16px Arial,Helvetica,sans-serif'", "font-family='Arial,Helvetica,sans-serif' font-size='16'")
            Dim stream = New System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(strSVG))
            Dim svg = SvgDocument.Open(stream)
            svg.Draw().Save("YOUR FILE LOCATION", System.Drawing.Imaging.ImageFormat.Png)

    Change the "System.Drawing.Imaging.ImageFormat" to whatever you would like.

    At the end you don't have to save it to a file, you can save it to a stream and post it back as the response as part of a "download chart" submission.

    It would have been much easier but the control was struggling with the "style=" syntax in the SVG and it wouldn't save any of the text to the image. Hence the reason for the "Replace" lines - which took additional time to troubleshoot.

    According to the powers that be at that site:
    "It appears to be that the library doesn't support the 'complex' font syntax in the style attribute. I can't work out why, because the standard FontConverter class should support that syntax (or at least similar ones). "

    But the workaround wasn't that hard. I suppose if you change the default formatting for any of the labels or titles in the chart, you will need to adjust your "replace" lines.

    Hope this saves someone many hours!

    Shawn
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 09 Mar 2012 Link to this post

    Hi,

    We opted to use Inkscape for the demo as it offers export to both vector (PDF) and raster formats. It also appears to handle the generated SVG very well.

    With this considerations in mind, the SVG Rendering Engine is an admirable project and using it for image export is perfectly valid. 

    Would you mind sharing a sample project as a Code Library in exchange for a generous amount of Telerik points?

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Shawn R.
    Shawn R. avatar
    4 posts
    Member since:
    Nov 2008

    Posted 09 Mar 2012 Link to this post

    Now featuring PDF export as well using iTextSharp library.

    This project uses the following free libraries:

    SVG Rendering Engine
    http://svg.codeplex.com/ 

    iTextSharp
    http://sourceforge.net/projects/itextsharp/ 

    Notes:
    *The PDF export is a bit pixelated. I haven't given up on a Vector PDF implementation - but not yet.
    *Setting the charts background to transparent can result in some export problems for certain image types - especially jpeg. Please set a chart background accordingly - "white" works nicely.

    Enjoy - Shawn
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 12 Mar 2012 Link to this post

    Hello,

    Thank you for submitting the project. I'm not sure if you'll be able to achieve true vector PDF export in this manner. For this purpose we still recommend using Inkscape.

    The Telerik points have been dispatched to your account.

    Greetings,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 18 May 2012 Link to this post

    Thanks for the code Shawn, works great. Just wanted to post that I was unable to get font replacement work unless I only had 1 font defined: 

    svg = svg.Replace("style='font: 12px Arial,Helvetica,sans-serif'", "font-family='Arial' font-size='12'");

    In case any one else ran into issues where the font declared was Arial,Helvetica,sans-serif and it displayed Times New Roman once rendered.
  6. Srinivas
    Srinivas avatar
    1 posts
    Member since:
    Mar 2011

    Posted 14 Sep 2012 Link to this post

    Hi ,

    when I export  kedoui chart data using  SvgDcoument class of Svg namespace as Image  i get the following error "An error occurred while parsing EntityName. Line 1, position 71755." at line of code  "strSVG = SvgDocument.Open(stream)" .I Suspect this is because of exporting huge amount of data. can you please suggest me how to overcome this issue.It works fine for small amount of data. Please find the below snippet code which I used to export data.

          Here svg is string value of chart data which we going to export.







                var stream = new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(svg));



                    var strSVG = SvgDocument.Open(stream);



                    System.Drawing.Imaging.ImageFormat imageFormat = System.Drawing.Imaging.ImageFormat.Png;



                    var filename = TempFileName() + ".png";



                    var bitmap = new System.Drawing.Bitmap(strSVG.Draw());



                    bitmap.Save(filename, imageFormat);

     Please help me out of this problem..



    Thanks in advance..

     

     

  7. Flavio Lepka
    Flavio Lepka avatar
    8 posts
    Member since:
    Mar 2006

    Posted 01 Feb 2013 Link to this post

    tks
  8. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 08 Dec 2014 Link to this post

    I have a MVC page where a submit form issues an ajax call to load few kendo ui grids and kendo ui charts in a <div> placeholder, calling the asp.net mvc action. Now I like to add the feature where the same submit button with 'PDF' export option as hidden field, do the same exact content to be exported as PDF. How can I do that? 
    I know I saw examples where I can get svg of the chart on javascript and post it at the submit. But in m case, I have mutliple charts and multiple grids as well. 
    Please help me with a solution..
  9. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 09 Dec 2014 in reply to Puneel Link to this post

    I got this resolved 
  10. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 09 Dec 2014 in reply to Puneel Link to this post

    I got this resolved from another post "Export multiple charts". Its a javascript kendo call which is pretty cool
Back to Top