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 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:
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)
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)
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.
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:
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
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.