Cannot export Diagram to image with formats PNG/JPG/SVG

[Pham Van Sy]

Hi Team!
I have created some nodes with shape type is Native
When I export nodes to image, the nodes is not displayed properly as below image

Do you have solution or workaround to resolve this issue
Please help me
Thanks

SY

[Pranoove Karnan]

Hi,

 

The standard export function does not support exporting Native and HTML nodes. To export these nodes correctly in image format, you can use Syncfusion PDF Blink rendering in the server side.

Please refer to the following Knowledge Base article for guidance on implementing Blink rendering in your application:

 

KB: How to print or export the HTML and Native nodes into image format using Angular Diagram

 

Let me know if you need any further assistance!

 

Regards,

Pranoove.

[Pham Van Sy]

Thanks for your reply
I have tried your suggestion, but I still cannot export Diagram content to  image
I received this error

Could you help me how to fix this error?
Thank You!

SY

[Pranoove Karnan]

Hi,

 

By following the steps in the KB, we did not encounter any errors, and the export worked as expected. Please refer to the attached video for better understanding.

 

If you're still facing the issue, please share your sample so we can validate it further.

 

Let me know if you need any more assistance!

 

Regards,

Pranoove

Attachment: BlinkRenderingDemo_f06a81b9.zip

[Pham Van Sy]

DearPranoove Karnan,
Thanks for your reply
This is my mistake, I didn't run the Server sample project when export to image
But I have a question, Do I need to create a project for server to preform the export functions?
If so, in the my web application, how do I integrate the server project into my application?

Thank You!

SY

[Pranoove Karnan]

Hi Pham,

Both the server-side and client-side applications are required to export the image in the diagram, and they must be separate applications. You cannot integrate them into a single application.

For more details, please refer to the KB article below:

KB: How to Print or Export the HTML and Native Node into Image Format using Angular Diagram

Best regards,
Pranoove

[Pham Van Sy]

Yes, I got it
But I have other questions for export image
Q1. When I change the image format to export it to SVG or other formats, the exported image still remains in the PNG format.
Q2. I changed the starting point for the selected area to export the image, but the exported image showed no changes.

I made the above changes in your source code as shown in the image below. Could you explain to me how to apply those changes?

this.http.post(url, requestData, options)

    .subscribe(

      (result: any) => {

        console.log('success', result);

        debugger;

        this.diagram.exportImage(result.result, {

          fileName: 'diagram',

          mode: 'Download',

          region: 'Content',

          stretch: 'Meet',

          pageHeight: 1000,

          pageWidth: 800,

          bounds: new Rect(200, 200, 800, 800),

          format: 'SVG'

        });

      },

      (error: any) => {

        console.log('error', error);

        // Handle errors here

      }

    );

Thank You!
SY

[Moulidharan Gopalakrishnan]

Hi,

Please find the details below regarding your queries and our solutions:

S.No	Query	Solution
1.	When I change the image format to export it to SVG or other formats, the exported image still remains in the PNG format.	We have created a sample and successfully exported the image in JPG format, and it is working fine. We have attached the sample below for your reference. Please review it and let us know if you specifically need an SVG export. We will check and provide an appropriate solution.
2.	I changed the starting point for the selected area to export the image, but the exported image showed no changes.	Please refer to the following knowledge base article for exporting an image with a specified area: How To export base64 Image with diagram size using blink rendering in Angular Diagram?

Let us know if you need further assistance.

Best regards,
Moulidharan

 

Attachment: ExportSample_128458b5.zip

[Pham Van Sy]

Hi  Moulidharan Gopalakrishnan
Could you check again for this one
I have change the format to SVG in your source code, but the image exported is still PNG



Thank You!

SY

[Meriton Jamesdurai]

Hi Pham,

Thank you for bringing this to our attention.

We are currently investigating this issue and will provide you with an update as soon as possible.

Please let us know if you need any further assistance in the meantime.

Best regards,
Meriton

[Moulidharan Gopalakrishnan]

Hi,

After further analysis, we found that HTML to SVG conversion is not supported by the Blink rendering engine. Therefore, it cannot be achieved using the Diagram's exportImage function either.

However, this functionality can be achieved using the WebKit rendering engine. Please note that the public WebKit NuGet packages are no longer available on nuget.org. Instead, you can install the Syncfusion.HtmlToPdfConverter.QtWebKit.WinForms package via the Package Manager Console.

If you are open to this suggestion, we can proceed with implementing and testing the diagram export of an HTML string to SVG using the WebKit engine and provide you with a solution.

Kindly let us know if you need any further assistance.

Regards,
Moulidharan G

[Pham Van Sy]

Hi  Moulidharan Gopalakrishnan
Sorry for the delayed response
I would be very happy if you could provide me with a solution using the WebKit engine
Please help me to resolve this issue
Thank You!

[Moulidharan Gopalakrishnan]

Hi Pham,

 

Apologies, Upon further testing, we found that while the WebKit rendering engine does support converting webpage URLs to SVG format, it does not support converting HTML strings—such as the HTML content of a diagram with native/HTML nodes—into SVG. We attempted to use this approach for exporting the diagram, but unfortunately, it could not be achieved.

Therefore, currently, exporting diagrams that contain native or HTML nodes to SVG format is not supported.

 

Regards,

Moulidharan

[Pham Van Sy]

Yes, I got it
But when I deployed the export image application to the hosting, I cannot export the content of the Diagram control
I received this error. Please help me to resolve this one


Link:  - SyncfusionWebApp

Thank You!

SY

[Moulidharan Gopalakrishnan]

Hi,

The export failure is due to a server-side issue where the deployed URL is not responding correctly, likely caused by HTTPS misconfiguration, CORS policy restrictions, or server route misconfigurations.
Please verify that the /home/generatedocument endpoint is reachable in production and supports POST requests without HTTP2 protocol errors. Ensure CORS is properly enabled for all origins, methods, and headers in production. Also, check hosting firewall rules, SSL certificates, and increase request body size limits if needed to return the expected base64 response.

Regards,

Moulidharan

[Pham Van Sy]

Hi  Moulidharan,

Thank for your reply
I have checked the Web config, CORS policy and I think it's not have problems about that
I used Postman to test the response of the API and I found if I send request to the url: https://exportimage.slpsoft.net/ then I can receive the response
If I used the url: https://exportimage.slpsoft.net/home/generatedocument, I cannot receive the response.
Please help me to check this one

Thank You!

[Moulidharan Gopalakrishnan]

Hi,

Thanks for the update. Since you are not encountering any CORS policy errors or configuration issues, and it is working locally but failing only on the published site, we will also check the server-side hosting configuration and get back to you.

Regards
Moulidharan

[Pham Van Sy]

Thank You!

[Moulidharan Gopalakrishnan]

Hi,

After further validation, we were able to replicate the issue you are facing. Currently, we are encountering access restriction problems. We have verified that the server-side hosting configuration is functioning correctly in the local environment; however, the issue appears to occur only on the published site. We are actively investigating this case and will get back to you with a resolution as soon as possible.

Regards
Moulidharan

[Moulidharan Gopalakrishnan]

Hi,

After further validation, we were able to replicate the issue you are facing. The problem appears to be related to access restrictions that occur only on the published site. While the server-side hosting configuration works correctly in the local environment, the access restriction issue persists when deployed.

We have identified and resolved the issue by ensuring the following configurations are in place:

Please ensure the following:

Controller Routing:

Add the [Route("home")] attribute to your controller class:

[Route("home")]

public class HomeController : Controller

 

HTTP POST Endpoint:

Ensure the [HttpPost("generatedocument")] attribute is applied to your action method:

[HttpPost("generatedocument")]

public ActionResult GenerateDocument([FromBody] DiagramOptions diagramOptions)

 

CORS Configuration:

Make sure CORS is properly configured to allow cross-origin POST requests. For example:

builder.Services.AddCors(options =>

{

    options.AddDefaultPolicy(policy =>

    {

        policy.AllowAnyOrigin()

              .AllowAnyHeader()

              .AllowAnyMethod();

    });

});

 

Also, ensure that app.UseCors(); is placed before app.UseAuthorization(); in your middleware pipeline:

app.UseCors();

app.UseAuthorization();

 

Web.config Configuration:

If hosting on IIS, ensure your web.config file (create one if it doesn't exist if mandatory) is correctly configured for ASP.NET Core applications to handle requests properly.

By addressing the above points, the /home/generatedocument endpoint should be accessible via POST requests from any browser or domain.

Finally, confirm that your hosted webpage (e.g., https://exportimage.slpsoft.net) has the necessary permissions and server configurations to allow POST access to the endpoint at:

https://exportimage.slpsoft.net/home/generatedocument.

Please review and apply these configurations to resolve the issue.

Regards,
Moulidharan

Attachment: SyncfusionWebApp_991c90b1.zip

[Pham Van Sy]

Thank for your answer 

But when I modified the code by your guides, I cannot load the site on the local host and when I published  the site, I also cannot loaded the site

Could you check on this one on your project
Thank You!
SY

[Moulidharan Gopalakrishnan]

Hi,

 

The issue you are encountering is due to the addition of controller-level routing. As mentioned before, we added the [Route("home")] attribute to the controller class, which means the sample will now render the diagram at https://localhost:44301/home rather than https://localhost:44301.

We have ensured that the webpage is hosted and configured correctly to accept POST requests at:

• https://localhost:44301/home/generatedocument, and
• [LiveSiteName]/home/generatedocument.

Please make sure that your hosted webpage (https://exportimage.slpsoft.net) has the necessary access and permissions to route to https://exportimage.slpsoft.net/home/generatedocument. Also, verify that the server is configured correctly according to your hosting platform to support this route.

 

Regards,

Moulidharan

[Pham Van Sy]

Hi  Moulidharan
I am still not to loaded the site when I published the site, although I get the site from the url:  https://exportimage.slpsoft.net/home



This is my web config


This is Hosting Setting for my web

Could you check it again to resolve this issue?
Thank You!
SY

[Moulidharan Gopalakrishnan]

Hi Pham,

We will host the application on any of live server app domains, verify the scenario, and update you accordingly.

Regards,
Moulidharan

[Pham Van Sy]

Hi Moulidharan,

Do you have any update for this one?

[Moulidharan Gopalakrishnan]

Hi Pham,

 

Apologies for the delay. We are currently investigating the issue in azure enviroinment, where the /generatedocument endpoint  which relies on Syncfusion’s HtmlToPdfConverter (Blink engine), consistently returns a 502 error during processing—particularly when image conversion is involved.

When tested with an empty string (i.e., no content requiring conversion), the endpoint functions correctly.
This suggests that the Blink-based HTML to PDF conversion is likely encountering restrictions or unsupported features within Azure’s sandboxed environment, causing it to fail at runtime with a 502 error.

we are actively working on to find solution for this issue with different approaches and will update soon as possible

 

Regards,

Moulidharan

[Sivaranjith Jeyabalan]

Hi Pham,

We have identified an alternative to Blink rendering for exporting HTML content by using the Syncfusion.HtmlToPdfConverter.Cef.Net.Windows package. This approach simplifies server-side rendering and avoids the complexities associated with Blink dependencies.

To demonstrate this, we’ve created a server-side sample using the mentioned package and hosted it at the following URL: 🔗 https://app146271-hnhneebxauhffdde.canadacentral-01.azurewebsites.net/home

Additionally, we’ve prepared a client-side sample to illustrate how the integration works from the frontend: 🔗 Sample

This setup demonstrates a seamless way to export HTML content to Image using Syncfusion’s CEF-based converter.

For more information refer - Azure App Service (Windows) . If you have any questions regarding this, please feel free to ask.

Regards,
Sivaranjith

Attachment: MVChtmlimage_69f284df.zip

[Pham Van Sy]

Thank for your reply
I have tried your solution in your sample

but I cannot export the diagram
Could you check it again?

Thank You!
SY

[Sivaranjith Jeyabalan]

Hi Pham,

The previously hosted URL has expired, which is why it was not working for you. We’ve created a newly hosted URL on Azure and updated the sample accordingly.

Please check the new sample and let us know if it works as expected. We’ve also attached a video demonstrating HTML exporting using the updated URL.

Regards

Sivaranjith

Attachment: videohtmlexport_77c3746a.zip

[Sivaranjith Jeyabalan]

Hi Pham,

The current hosted URL will expire on July 31st. Please ensure you check it from your side before this deadline.

Regards,

Sivaranjith

[Pham Van Sy]

Thank  Sivaranjith
I will check it and I will let you know if I have any questions
Thank YO

[Preethi Rajakandham]

Hi Pham Van Sy,

You are welcome. Please review and get back to us. We will look forward to your reply.

Regards,

Preethi R