Export Html/Native node into image format in ASP.NET MVC Diagram.

Currently we don’t have support to export the diagram into image format with native and html nodes. Since while exporting, ASP.NET MVC 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-us/download

X64 - https://www.microsoft.com/en-in/download/

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.

DiagramExportingUtility diagram = new DiagramExportingUtility ();
// set the physical path of QtBinaries folder.
string webKitPath= HttpContext.Current.Server.MapPath("~/App_Data/QtBinaries");
// convert the html content to image format
diagram.ConvertImage("htmlData", 300, webKitPath);
 

ConvertImage

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

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

You can download the utility project from the below link.

Utility project link: https://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

Here is the code example:

var diagram = $("#DiagramContent").ejDiagram("instance");
//get the diagram content as a string
var htmlData = diagram.getDiagramContent(["file:///E:/StyleSection/ej.widgets.core.min.css", "file:///E:/StyleSection/ej.theme.min.css", "file:///E:/StyleSection/StyleSheet1.css"]);
 

getDiagramBounds

Here is the code example:

//get the diagram bounds
var size = diagram.getDiagramBounds();

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.

 
var jsonResult = { htmlData: { htmlData: htmlData, width: size.width } };
 
$.ajax({
    type: "POST",
    url: "Default.aspx/GenerateDocument",
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(jsonResult),
    traditional: true,
    async: false,
    success: function (data) {
  // export the image with png format and specified region.
        diagram.exportImage(data.d, { region: "content" });
    },
});
 

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

var diagram = $("#DiagramContent").ejDiagram("instance");
// get the diagram content
var htmlData = diagram.getDiagramContent();
 
// get the diagram bounds
var size = diagram.getDiagramBounds();
 
var jsonResult = { htmlData: { htmlData: htmlData, width: size.width } };
 
$.ajax({
    type: "POST",
    url: "Default.aspx/GenerateDocument",
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(jsonResult),
    traditional: true,
    async: false,
    success: function (data) {
    // export the image into different format with certain export option.
    diagram.exportImage(data.d, { fileName: "diagram", format: "png", region: "content" });
    },
});
 

Server Side

[WebMethod]
public static object GenerateDocument(object htmlData)
{
    Dictionary<string, object> htmlContent = (Dictionary<string, object>)htmlData;
    // set the QTBinaries path
    string qtBinariesPath = HttpContext.Current.Server.MapPath("~/App_Data/QtBinaries");
    DiagramExportingUtility diagram = new DiagramExportingUtility();
    // convert the html content to base64String image format.
    return diagram.ConvertImage(htmlContent["htmlData"].ToString(), Convert.ToInt32(htmlContent["width"]), qtBinariesPath);
}

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: https://www.syncfusion.com/downloads/support/directtrac/general/7z/191077-1436035692

​Conclusion

I hope you enjoyed learning about export Html/Native node into image format.

You can refer to our ASP.NET MVC Diagram’s feature tour page to know about its other groundbreaking feature representations. You can also explore our  ASP.NET MVC Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET MVC Diagram and other ASP.NET MVC components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!