How to export the HTML and Native node into image format in .NET MVC ?

.NET MVC Currently, support to export the diagram into image format with the native and HTML nodes is not available. Since while exporting, the diagram will be drawn in a canvas, and then canvas is converted to image format. Currently, drawing in a canvas equivalent from all possible HTML is not feasible and rendering the SVG content in a canvas and convert canvas to image will get the security issues in IE browser.

You can refer to the following 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, Syncfusion Essential PDF library is used, 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 downloaded from the following 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. Use the following download link to get the installer.

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

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

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

1. MSVCP100.dll
2. MSVCR100.dll

Prerequisites and Setting up for conversion

A utility project is created, which requires the following two things to convert the HTML content to image format.

• To convert HTML content to Image in the application using WebKit rendering engine, “Syncfusion.HtmlConverter.Base.dll” assembly should 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 utility project, the “ConvertImage” method of DiagramExportingUtility is used to convert the HTML content into image format.

Refer to the following 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

Refer to the following table that explains about the arguments needed for the ConvertImage method.

The “ConvertImage” method will return the “base64String” after converting the HTML content to image.

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

getDiagramContent

Refer to the following code example.

var diagram = document.getElementById("diagram1").ej2_instances[0];
//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

Refer to the following 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 the server through Ajax post to get the diagram content as an image.

Refer to the following 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

After getting the image converted from server-side, you can save the image with different format with certain exporting options by using the “exportImage” API method.

The exportImage method having all the options as like the exportDiagram API method except “mode” argument, since it is not applicable for the exportImage method.

 So, you can pass the base64Image returned from server-side as the first argument of the exportImage method. You can define the export settings in the second argument.

Refer to the above highlighted code snippet.

To know about export settings, refer to the following link.

https://ej2.syncfusion.com/documentation/api/diagram/iExportOptions/

printImage

Similarly, you can use the “printImage” method to print the image with certain option and it has all the options as like the print method.

Refer to the final client-side code example as follows

var diagram = document.getElementById("diagram1").ej2_instances[0];
// 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" });
    },
});
 

Refer to the server-side code example as follows

[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);
}

Utility project should be attached in the sample to perform conversion of HTML to image format. The complete ASP.NET Sample can be downloaded.

Conclusion

I hope you enjoyed learning about how to export the HTML and Native node into image format in .NET MVC

You can refer to our ASP.NET MVC feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MVC example to understand how to create and manipulate data.

For current customers, you can check out our 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 other controls.

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