We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Export Html/Native node into image format

Platform: ASP.NET Web Forms |
Control: Diagram |
Published Date: November 20, 2017 |
Last Revised Date: November 20, 2017

Currently we don’t have support to export the diagram into image format with native and html nodes. Since while exporting, Diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible and also rendering the SVG content in canvas and convert canvas to image, will get the security issues in IE browser. You can refer the below link for more details on this.



So we have used our Syncfusion Essential PDF library which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine.

Qt WebKit rendering is accurate, and the result preserves all the graphics, images, texts, fonts, and the layout of the original HTML Content.

Latest WebKit HTML converter can be download from the below link,


WebKit HTML conversion also requires VC++ 2010 redistributable, this should to be installed in the machine where the conversion takes place. Please use below download link to get the installer.

X86 - https://www.microsoft.com/en-in/download/details.aspx?id=5555

X64 - https://www.microsoft.com/en-in/download/details.aspx?id=14632

Instead, the required assemblies can be placed in the Windows system folder (for 64-bit machine, it should be place in $SystemDrive\Windows\SysWOW64 and for 32-bit machine, it should be place in$SystemDrive\Windows\System32),

  1. MSVCP100.dll
  2. MSVCR100.dll

Prerequisites and Setting up for Conversion

We have created a utility project which requires the below two things to convert the html content into image format.

  • To convert HTML content to Image in the application using WebKit rendering engine, Syncfusion.HtmlConverter.Base.dll assembly needs to be referred in this utility project.


  • The QtBinaries folder available in the WebKit HTML Converter installed location ($SystemDrive\Program Files (x86)\Syncfusion\WebKitHTMLConverter\xx.x.x.xx\QtBinaries). The physical path of this folder should be set to the WebKitPath property of WebKitConverterSettings.


In that utility project, DiagramExportingUtility’s “ConvertImage” method is used to convert the html content into image format.

Here is the code example.



Please refer to below table in which we have explained about the arguments needed for ConvertImage method.




Pass an html content which needs to be converted as an image format.


We don’t have Horizontal overflow support in WebKit converter, so that if the Diagram width exceeds the document width it could not be paginated to next page. To overcome this, we should adjust the horizontal view port of WebKit Converter.


We can use this argument to adjust the horizontal view port of WebKit Converter.


set the physical path of QtBinaries folder.


The “ConvertImage” method will return the “base64String image format.

You can download the utility project from the below link.

Utility project link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ExportingUtility-1968385779

To get the diagram content as html string and get the width to adjust the horizontal view port of WebKit Converter, we have introduced the following client-side API methods.


Method Name


Return Type




It is an optional argument.

If we specify this, we will get the diagram content along with those stylesheet references. Please note that you have to define absolute path for local CSS file.


If its not specified, we will get the diagram content along with all stylesheets loaded in the document.


The method is used to get the diagram DOM element as a string along the all dependent stylesheets.


Here is the code example:



Method Name

Return Type




The method is used to get the diagram bounds.



Here is the code example:


You can use those methods to get the html content and width, send it to server via ajax post to get the diagram content as an image.

Here is the code example.



Once you get the image converted from server side, you can export it using exportImage” API method. Please refer to the below help documentation

 Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:exportimage



Similarly, you can use the “printImage” method to print the image. please refer to the help documentation below.

Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:printimage


Finally, the actual server side and client-side code snippet will be looks like below.

Client Side


Server Side



We need to attach utility project in the sample to perform conversion of HTML to image format. Please refer to the ASP.Net sample below for your reference.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/191077-1436035692

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon