HTML to Image Not Sizing Correctly

Hi, We’re trying to create an image from what is represented in a design application we’re working on. The text and images are all absolutely positioned and things get placed generally in the right location, so it’s sort of working. But the size of the image that is created is close, but not exact… It clips off the right edge of our HTML Doc (or output image) and adds additional padding or whitespace to the bottom of the image.

The following attachments show what is going on, the “source-html-on-screen” image shows how it looks in the browser. The “image-output” image shows what gets generated as a Jpg or Png, notice the clipping on the right side of the image, and the padding on the bottom. I’ve included the code we’re using to generate it, including some CSS resets I’ve added trying to solve the problem. But the problem preceded me adding the resets. It cleaned up some very minor things, but not the biggest issue of it not sizing the image properly (right and bottom issues).

Please advise. Thank you.

css-resets.png (207.3 KB)
conversion-code.png (252.7 KB)

source-html-on-screen.jpg (116.4 KB)
image-output.jpg (63.4 KB)

@MarcomUSER1

Please share your sample HTML in .zip format along with sample code snippet that you are using. We will test the scenario in our environment and address it accordingly.

I have simplified my code so it can be run in your environment. There is a method in the ‘sample-code.cs’ file called “MockProcessDesignOutputDownload” that does the work.

The very simple HTML is built in lines 3-12 and consists of just one image with some CSS.
Line 17 uses a logger to print it to the console. That is shown in the file called “sample-html.png”.

I added some CSS resets as an attempt to resolve the problem, but it does not fix it.

Files “sample-image-using-converter_1.jpg” and “sample-image-using-renderer.jpg” show the outputs.

There are two primary issues:

  1. You can see it clips the right side (my image has a border so it’s easy to see that the right is cut off)
  2. It adds additional padding to the bottom of the image (shown by whitespace beyond my image).

Our real designs will have a mix of text and images dropped on the page. All use absolute positioning. It places everything roughly where it should be, but the right clipping and bottom padding persists no matter how simple or complex my HTML. Is there a way to explicitly set the output size of the saved image?
Html-To-Image-Issue.zip (90.6 KB)

And then an additional test with an image that should be 500x500px generates the same size output as the above tests. At 96dpi, it generates at 794 x 1123 no matter what the actual size should be.

This should have generated at 500 x 500.
500x500.png (37.2 KB)

@MarcomUSER1

We apologize for the delayed response. We have observed your response and noticed that this case needs to be further investigated. For the purpose, an investigation task as HTMLNET-4067 has been generated in our issue tracking system. We will further look into its details and keep you posted with the status of its correction. Please be patient and spare us some time.

We are sorry for the inconvenience.

It appears to be sizing to A4 paper size no matter what.

@MarcomUSER1

We will surely investigate from this perspective and let you know as soon as the ticket is resolved.

@MarcomUSER1

By default, the page size when rendering is A4, it can be changed using the options as follows

var imageOptions = new ImageSaveOptions(ImageFormat.Jpeg)
{
    SmoothingMode = SmoothingMode.Default,
    HorizontalResolution = 96,
    VerticalResolution = 96
};
imageOptions.PageSetup.AnyPage.Size = new Aspose.Html.Drawing.Size(100, 100);

In this code snippet, the page size is set to 100x100 pixels.
If you want the size of the resulting image to match the size of the content, then you can use the following code:

var imageOptions = new ImageSaveOptions(ImageFormat.Jpeg)
{
    SmoothingMode = SmoothingMode.Default,
    HorizontalResolution = 96,
    VerticalResolution = 96
};
imageOptions.PageSetup.PageLayoutOptions = PageLayoutOptions.FitToContentHeight | PageLayoutOptions.FitToContentWidth;

Thank you. The first option seems to be working pretty well.

1 Like

@MarcomUSER1

Its nice to hear your feedback. Please keep using our API and feel free to create a new topic in case you need further assistance.

The issues you have found earlier (filed as HTMLNET-4067) have been fixed in this update. This message was posted using Bugs notification tool by avpavlysh

Why it set to 96 and no 100?

@Kruzer

The resolution and page size are two different things. We set value of resolution as 96 because it is commonly used in web images for low resolution. You can set this value as per your desire.