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.
Unfortunately, activation email could not send to your email. Please try again.

Export Html/Native node into image format

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.

https://connect.microsoft.com/IE/feedbackdetail/view/946521/unexpected-call-to-method-or-property-access-while-drawing-svg-image-onto-canvas-in-ie-11

https://connect.microsoft.com/IE/feedback/details/809823/draw-svg-image-on-canvas-context

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,

https://www.syncfusion.com/downloads/latest-version

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.

 

ConvertImage

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

Arguments

Description

htmlContent

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

width

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.

webKitPath

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.

getDiagramContent

Method Name

Argument

Return Type

Description

getDiagramContent

styleSheetReferences

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.

string

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

 

Here is the code example:

 

getDiagramBounds

Method Name

Return Type

Description

getDiagramBounds

Object

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.

 

exportImage

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

 

printImage

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

Article ID: Published Date: Last Revised Date: Platform: Control:
8160 11/20/2017 11/20/2017 ASP.NET MVC Diagram
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.