Hello,
I’m trying to use Aspose.HTML 2025.06 for .Net to convert HTML into PDF.
HTML consist of a base64 image and an overlay on top. This overlay is meant to clip the corners of the chart visible on the image.
I have tried:
- placing a transparent div with a border on top of the image. This resulted in an visual defect - corners are rendered with thin gaps, so the image beneath is visible.
- placing another base64 image on top of the other one. This resulted in other visual defect - the overlay image is rendered with additional thin, dark border
Is there a workaround that I could use for this case?
Here is the comparison of how HTML+CSS is rendered in web browser vs how the generated PDF looks like.
img-overlay-issue.png (176.4 KB)
Example solution can be found in attachments. Run the solution and find the “output.pdf” in “bin” folder.
ConsoleApp1.zip (54.6 KB)
@mlamla
Cause
The issue you’re experiencing with clipping corners of an image in your PDF conversion likely stems from the way the overlay is being rendered. Using a transparent div or another base64 image can lead to visual artifacts, such as thin gaps or unwanted borders, due to how the rendering engine handles transparency and layering.
Solution
To achieve a clean clipping effect without visual defects, consider using an SVG mask or a clipping path. This approach allows you to define the shape of the visible area directly, which can help eliminate the gaps and borders you’re encountering.
Code
Here’s a basic example of how you can implement an SVG mask in your HTML:
<div style="position: relative; width: 300px; height: 300px;">
<img src="data:image/png;base64,...your_image..." style="width: 100%; height: 100%; clip-path: url(#clip-path);" />
<svg width="0" height="0">
<defs>
<clipPath id="clip-path">
<rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" />
</clipPath>
</defs>
</svg>
</div>
In this example, the clip-path is defined in an SVG and applied to the image. You can adjust the rx and ry attributes to change the corner radius.
Next Steps
- Replace your current overlay method with the SVG mask approach.
- Test the output by converting the updated HTML to PDF using Aspose.HTML.
- Adjust the dimensions and corner radius as needed to fit your design requirements.
If you have any further questions or encounter additional issues, please reach out for more assistance. I’m here to help!
@mlamla
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.
Issue ID(s): HTMLNET-6507
You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.
Hey @asad.ali ,
can you provide me with any tips or a workaround for my case? the one suggested by bot does not seem to work.
I found a workaround. Div with background image, clipped by container div. The css looks ugly though and componentizing this solution does not look simple. Looking forward to your fixes.
result:
fixed-img-overlay-issue.png (35.9 KB)
code:
<style>
.image-div {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACVgAAAGhCAYAAACeMk3UAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAABcRgAAXEYBFJRDQQAAE1dJREFUeJzt3KEuhmEch2GfmaYpAt0BmCA7DU1VbA7Cpqia05AFcwA6QfmapjwOgHuzva99xnUdwH+/8rR7z2KMMdYAAAAAAAAAAAD4ZH3VAwAAAAAAAAAAAH4rgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAABIEVAAAAAAAAAABAEFgBAAAAAAAAAAAEgRUAAAAAAAAAAEAQWAEAAAAAAAAAAASBFQAAAAAAAAAAQBBYAQAAAAAAAAAAhI1VD+BrL2/vq54AAITdrc3JN87un2dYAgD8hOujvck3tm+eZlgCMN3ydH/yje2LuxmWwN+3vDyefOP29WCGJfA/nOw8TjvwsJhnCPwHh2P6jXNvDr7taoY3x+z8YAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAEFgBQAAAAAAAAAAEARWAAAAAAAAAAAAQWAFAAAAAAAAAAAQBFYAAAAAAAAAAABBYAUAAAAAAAAAABAEVgAAAAAAAAAAAGExxhirHgEAAAAAAAAAAPAb+cEKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIAisAAAAAAAAAAAAgsAKAAAAAAAAAAAgCKwAAAAAAAAAAACCwAoAAAAAAAAAACAIrAAAAAAAAAAAAILACgAAAAAAAAAAIHwA7P4eO+cbftgAAAAASUVORK5CYII=');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
left: -16px;
top: -20px;
width: 358px;
height: 45px;
margin: 0;
border: 0px transparent;
position: absolute;
}
.image-div-clipper {
border-radius: 5px;
overflow: hidden;
width: 326px;
height:24px;
/*background-color: blue;*/
margin: 10px;
border: 0px transparent;
position: relative;
}
</style>
<div style="border: red 1px solid; padding: 10px;">
<p>Barchart as a background image, clipped by container area</p>
<div class="image-div-clipper">
<div class="image-div"></div>
</div>
</div>
@mlamla
Thanks for sharing more information. We will be taking this information into consideration while applying the fix and let you know as soon as the ticket is resolved. Please spare us some time.
We are sorry for the inconvenience.