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