Convert Visio to HTML using Aspose.Diagram for .NET - image size issue

Hello,

I’m saving vsd file to html. And I see quite big difference between html generated by Aspose component and Visio application. See attachment. You will find there a html from both apps. The problem for me is image representing visio content. To simplify I copied these images to root folder:

  • by aspose.png
  • by visio.png

As you can see visio basically crop the image to real content only (we see the shape only) but aspose generates big image with entire canvas (page) from visio (including marings etc).
In my application I have to mimic visio behavior as much as possible.
Is there a way to generate html with the image cropped to content only (like in real visio app)?

VisioDiff.zip (67.5 KB)

Thanks

@mmdevelopment

Would you kindly share the code snippet that you have used to convert .vsd to .html. We will test the scenario in our environment and address it accordingly.

I have prepared a test application. To use it first you need to set a destination folder where application will generate files and then press buttons below to create files using Aspose and Visio (you need to have visio installed on this machine).

VisioTest.zip (296.8 KB)

You can also find generated files in the solution folder (Result subfolder). The most important item is a image files which represents a visio content (png_1.png in visio and img_0.png in aspose).
It is very important for my company that these files should have the same size (and also html area map should work correct with the smaller image).

If you need more info, please let me know.

Thanks

@mmdevelopment

We have logged an issue as DIAGRAMNET-51737 in our issue tracking system for the sake of detailed investigation. We will surely check it in details and keep you posted with the status of its correction. Please be patient and spare us little time.

We are sorry for the inconvenience.

@mmdevelopment

Please try method “ShapeToHtml” OR firstly, group the shapes then, use this Sample code:

Aspose.Diagram.Saving.HTMLSaveOptions hs = new Aspose.Diagram.Saving.HTMLSaveOptions();
diagram.Pages[0].Shapes.GetShape(1).ToHTML("out.htm", hs); 

Thanks for the quick response. This solution is partially good (image looks good). But still there is a problem with html representation. There is no < MAP >< AREA > tags in the html file. Using visio and even saving as html in Aspose component such map for shapes (links) is generated.
Here is an example of such map generated by aspose:
img_0.zip (659 Bytes)
If your solution would generate such map, then this solution would be good for me.

@mmdevelopment

We have recorded your concerns and will let you know once any further update will be available.

@mmdevelopment

The issue has been resolved in Aspose.Diagram for .NET 19.12.1 hotfix. We will generate such map as < MAP >< AREA > tags for links in the html file using “shape to html” in next fix and version.

Hello,

I’ve tested the latest (v20.1.0.0) of Aspose.Diagram and the problem with HTML < map >< area> is still exist. Here is the sample app:
VisioTest.zip (45.8 KB)

This sample app uses 2 method of saving html from visio file:
Method 1 - use Diagram.Save() - this works good and < map>< area> is generated
Method 2 - use Shapes.Group().ToHtml() - this method doesn’t generate < map>< area> tags.

To see this compare file img_0.htm from Method1_files and Method2_files after you use this sample app.
I hope you will be able to add this map area to the second method.

Thanks

@mmdevelopment

We have re-opened the ticket and will surely let you know as soon as it is investigated and resolved. Please spare us some time.

We are sorry for the inconvenience.

The issues you have found earlier (filed as DIAGRAMNET-51737) have been fixed in Aspose.Diagram for .NET 20.1.

@mmdevelopment

We have further investigated the issue. There is no link in the new group shape in the sample file. Please add link to this new group shape then you will generate these two tags in output html using method “ToHTML” like below code:

Shape groupShape = diagram.Pages[0].Shapes.Group(list.ToArray());
Aspose.Diagram.Hyperlink link = new Aspose.Diagram.Hyperlink();
link.Address.Value = "";
groupShape.Hyperlinks.Add(link);

Or please use “ToHTML” before grouping the shapes.

Unfortunatelly this solution doesn’t work good. When I add this code it basically creates one hyperlink for entire gouped shape. And I need to have link for every shape in the group. In our application user can click on the specific shape and then he see details. When I use your solution we will have only one link for entire group.

Second suggestion to invoke ToHTML before grouping works like I need except the image is showing entire visio page and I need to crop the image to the shapes. This is the initial problem - crop the image to shapes only with the correct < area >< map > section generated. (see those images):
img_0.png (Method 1) (3.1 KB)
img_0.png (Method 2) (1.6 KB)

If you need more info, please let me know.

@mmdevelopment

We have recorded your concerns and will surely look after them while analyzing your requirements. We will let you know as soon as we have some additional updates regarding this scenario. Please spare us little time.

Do you know anything more about this issue? Do you have plans to implement this feature in a near future? For our application it is quite important feature and we would like to know what we can expect.

Thanks a lot!

@ManMasterDevelopment

We would like to share with you that implementations against logged issue are underway and we surely intend to provide fix against it. We have recorded your concerns and will surely consider them during investigation. We will update you as soon as we have certain news on ticket resolution. Please spare us some time.

Do you have any estimation when you will add this feature? I’m asking because in the end of April my company will release a new version of our application and we need to fix this problem. I hope that you will implement it and we will use it but if not then please let me know - and we will try to fix this in some other way.
Thanks!

@ManMasterDevelopment

We have added all links in the group shape when using method “shapetohtml”. Would you please try using Aspose.Diagram for .NET 20.3 and in case you still face any issue, please let us know.

Thanks for the quick response. I have tested a new version of Aspose.Diagram and it looks much better. During my tests I found 2 issues with the generated image and links. Here is a test project you can use to reproduce these issues:
VisioTest.zip (47.6 KB)
Please run the program, select output directory and press a button.
Now go to this folder and open generated html page. You can see 2 problems:

  1. Visio image is cropped in wrong place. The second shape is not fully visible:
    screen.png (11.8 KB)
  2. Now links are generated but with wrong coordinates. It looks like the coordinates are taken from the previous implementation where you generate a full page instead of cropped image. In output generated by this test application you cannot click on shapes because of wrong coordinates. Here is an example of the coordinates of the first shape:
    1.63205206149541E-06,184.342739543914,151.181103994257,297.728566315568
    I’ve bolded the left top position of the first element. In cropped image this should be changed to (1,1):
    1,1,151.181103994257,297.728566315568
    With this link works good for this shape.

Please let me know if you need more info about this problem.

P.S. FYI my company has two accounts: ManMasterDevelopment (with the license) and mmdevelopment so all posts in this thread are created by me.:slight_smile:
Roman

@mmdevelopment

Thanks for your feedback.

We have logged an issue as DIAGRAMNET-51812 in our issue tracking system for the sake of correction. We will further look into details of it and keep you posted with the status of its correction. Please be patient and spare us little time.

We are sorry for the inconvenience.