Tiff File Format Issue In Linux Server After .Net6 migration

Hi Team
I am attempting to generate the tiff file from my linux machine, the file file was not loading properly(Fonts are missing)
I have observed this issue after .Net 6 migration.
These are docker commands I have used to install fonts
image.png (33.8 KB)
image.png (1.5 KB)

Code I have used to generate the tiff file.
public void ConvertHtmlToTif(Stream source, Stream destination, HtmlToTifConversionOptions options)
{
Stopwatch stopwatch = new Stopwatch();

        stopwatch.Start();

        using (HTMLDocument doc = new HTMLDocument(source, ""))
        {
            CreateAndCropImageFromHtml(doc, destination, options);                
        }

        stopwatch.Stop();

        logger.Trace("Converted HTML to TIF in {0}", stopwatch.Elapsed);
    }

void CreateAndCropImageFromHtml(HTMLDocument document, Stream tiffStream, HtmlToTifConversionOptions options)
{
using (MemoryStream imageStr = new MemoryStream())
{
// 1 - Convert HTML to bitmap
CreateBitmap(document, imageStr, options);

            // 2 - load bitmap into System.Drawing.Bitmap to manipulate it.
            using (Bitmap bmp = (Bitmap)Image.FromStream(imageStr))
            {
                logger.Trace($"Converted HTML to bitmap, size is {bmp.Width}x{bmp.Height}");

                // Only bottom needs to be applied, because Aspose Image Save options support "AdjustToWidestPage"
                var result = 
                    options.TrimFromBottom  
                    ? AutoCropBottomOnly(bmp, options.BackgroundColor ?? Color.White, options.AdditionalBottomMarginInPixels)
                    : AutoCrop(bmp, options.BackgroundColor ?? Color.White);

                if (result != null)
                    result.Save(tiffStream, ImageFormat.Tiff);
                else
                    bmp.Save(tiffStream, ImageFormat.Tiff);
            }
        }
    }

Please help me to resolve this issue.
Note: I have used latest aspose libraries.

@Chenchu,

Which Aspose for .NET APIs you are using? The docker file (as per your screenshot) suggests you are using Aspose.Cells. But your pasted code and issue does not suggest this.

Hi @Amjad_Sahi
I am using the following library to generate the tiff files.
<PackageReference Include="Aspose.HTML" Version="22.10.0" />

Usually, the above attached code uses the above library to generate html document then the generated html document converted to Tiff image with help of bitmap, please see the below code for more info.

void CreateAndCropImageFromHtml(HTMLDocument document, Stream tiffStream, HtmlToTifConversionOptions options)
{
using (MemoryStream imageStr = new MemoryStream())
{
// 1 - Convert HTML to bitmap
CreateBitmap(document, imageStr, options);

            // 2 - load bitmap into System.Drawing.Bitmap to manipulate it.
            using (Bitmap bmp = (Bitmap)Image.FromStream(imageStr))
            {
                logger.Trace($"Converted HTML to bitmap, size is {bmp.Width}x{bmp.Height}");

                // Only bottom needs to be applied, because Aspose Image Save options support "AdjustToWidestPage"
                var result = 
                    options.TrimFromBottom  
                    ? AutoCropBottomOnly(bmp, options.BackgroundColor ?? Color.White, options.AdditionalBottomMarginInPixels)
                    : AutoCrop(bmp, options.BackgroundColor ?? Color.White);

                if (result != null)
                    result.Save(tiffStream, ImageFormat.Tiff);
                else
                    bmp.Save(tiffStream, ImageFormat.Tiff);
            }
        }

Hope u can understood.

@Chenchu,

I have moved your thread to respective forum and your issue will be evaluated by one of our fellow colleagues from Aspose.HTML team soon.

@Chenchu

An investigation ticket as HTMLNET-4139 has been logged in our issue tracking system to analyze this case in details. We will check and try to determine the actual cause of the issue and let you know as soon as the ticket is resolved. Please be patient and spare us some time.

We are sorry for the inconvenience.

Any update on this, If you I will provide sample html document.

@Chenchu

The ticket has just been logged in our issue tracking system and we are afraid that it is pending for an initial investigation. We will investigate and fix it on first come first serve basis. Meanwhile, you can please share your sample HTML as well as it would help in analysis.

Please find the html, which I am converting into Tiff image.

<html>
<body>
    <style type="text/css">       
    </style>
    <table style="color: Black; font-size: 12px; width: 930px;" cellpadding = "1" cellspacing="0" border="0">
        <tr>

            <td style="text-align: left; border-bottom:1px solid black; padding-bottom:10px;">&nbsp;</td>
            <td colspan="2" style="text-align: right; font-size: 20px; color: #999999;padding-bottom:10px; border-bottom:1px solid black; vertical-align: bottom;">SPECIALTY PHARMACY INVOICE</td>
        </tr>
        <tr>
            <td style = "width: 120px;color: #2F617F">Invoice Number:</a>
            <td style="width: 200px">12345678</td>
            <td style = "text-align: right;color: #2F617F">Payable to:</td>
            <td style="width: 250px;">Test</td>
        </tr>
        <tr>
            <td style="color: #2F617F">Invoice Date:</td>
            <td>11/29/2022</td>
            <td>&nbsp;</td>
            <td>
                Test
                <br />
                TestCity, TestStateCode
            </td>
            
        </tr>
        <tr>
            <td style="color: #2F617F">Pharmacy Name:</td>
            <td>TestPharmacy</td>
            <td>&nbsp;</td>
            
        </tr>
        <tr>
            <td style="color: #2F617F">EIN:</td>
            <td>Test</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="color: #2F617F"></td>
            <td></td>
            <td style="color: #2F617F;text-align: right">Phone:</td>
            <td>TestPhone</td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                <table border = "0" style="background-color: #CDE2FF;width: 100%;color:#5F5F5F;font-size:12px;">
                    <tr>
                        <td><span style="color:#2F617F;"><br />Client: </span>TestClientName<br /></td><td><span style="color:#2F617F">Authorizer:</span>
						
                        <td><span style="color:#2F617F;"><br />Claimant Name: </span>Test<br /></td>
                        <td>
                            <span style="color:#2F617F">
                                1234556
                            </span>123556
                   </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                <table class="tblProduct" cellpadding="1" cellspacing="0" border="0" style="width: 100%">
                    <tr style="height: 70px; color: #2F617F">
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Date of<br />Service</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">NDC #</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Drug Name</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">B/G</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Physician Name</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Qty</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Days&#39;<br />Supply</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">AWP</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">State Fee Schedule</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Original Billed Amount</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Price</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Total Savings</td>
                    </tr>
                    
                    <tr id="TABLEDETAILS" style="height: 70px">
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">11/22/2022</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">1234566</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;"> Pharasitamal&nbsp;1233</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">yes</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">Test</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">5</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">7</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">547575</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">45645657</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">765543</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">60</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 10px;">3</td>
                    </tr>
                    
                    <tr>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;" colspan="3">Total Invoice Amount</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;" colspan="6">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center; color: #0000FF;">465767</td>
                        <td style="border: 1px solid black; border-collapse: collapse; text-align: center;">&nbsp;</td>
                    </tr>
                    
                </table> 
            </td>
        </tr>
        </table>
</body>

@Chenchu

Thanks for sharing it. We have updated the ticket accordingly and will let you know once its resolved. Please spare us some time.

@Chenchu

Try to set a specific folder for fonts and put the necessary fonts there:

public void Test()
{
    string[] fontsFolders = { "/fontFolder/" };

    var configuration = new Configuration();
    var userAgentService = configuration.GetService<IUserAgentService>();
    userAgentService.FontsSettings.SetFontsLookupFolders(fontsFolders, true);

You can also process the selection of fonts and substitute a specific font:

    configuration.GetService<IUserAgentService>().FontsSettings.FontMatcher = new ArialFontMatcher();
    //configuration.GetService<IUserAgentService>().FontsSettings.SetFontsLookupFolder(string.Empty);

    using (HTMLDocument doc = new HTMLDocument(source, "", configuration))
    {
         ...
    }
}   
private class ArialFontMatcher : FontMatcher
{
     private readonly byte[] font;

     public ArialFontMatcher()
     {
          font = File.ReadAllBytes(fontsFolders[0] + "arial.ttf");
     }

     public override byte[] MatchFontFallback(FontMatchingProperties fontMatchingProperties, uint charCode)
     {
          return font;
     }
} 

Hi @asad.ali

Do you have the full code (or) any github link

@Chenchu

We are checking it and will get back to you soon.

Hi @asad.ali

As you suggested above, I have implemented the code to set custom fonts with the user service, but still same issue, However there is change in the file after applying this code. One letter shown in the below image “D”(Highlighted with orange box)
FontWithCustom.PNG (31.0 KB)

If you see initial screenshot, you will get the difference.

I have seen the ticket still in open state, please let me know if you need any help on this issue.

@Chenchu

Thanks for your kind feedback. We are investigating the case further and will surely let you know once the ticket is resolved or we need something from your side. Please spare us some time.

We are sorry for the inconvenience.

@Chenchu

Could you please send the full Docker file with which you are launching the application? And specify the installed version of Docker?

image.png (78.1 KB)

This is the docker file we are using. I am not sure about current docker version, I think we might be using latest one.
Thanks

@Chenchu

We have updated the ticket information and will let you know once some information is available about issue fix.

@Chenchu

We could not use your Dockerfile, because an error is generated when trying to build it.
Perhaps it is not given in full. According to the Docker documentation, it should start with FROM instruction “A Dockerfile must begin with a FROM instruction.”(Dockerfile reference | Docker Docs)

There is also no source code to convert the document to Bitmap.

Could you please send the full dockerfile so that the problem with Tiff conversion can be reproduced?
Using a standard Microsoft image, we successfully converted the document to PDF format. We attached an example of a Docker file and code.

internal class Program
    {
        static void Main(string[] args)
        {
            ConvertHtmlToTif();
        }

        public static void ConvertHtmlToTif()
        {
            using (Stream stream = File.Open("HTMLPage1.html", FileMode.Open))
            using (HTMLDocument doc = new HTMLDocument(stream, ""))
            {
                using (MemoryStream imageStr = new MemoryStream())
                {
                    var renderer = new HtmlRenderer();
                    var device = new PdfDevice(new FileCreateStreamProvider(".", "HTMLPage1.pdf"));
                    renderer.Render(device, doc);
                }
            }
        }
    }

Dockerfile:

FROM mcr.microsoft.com/dotnet/sdk:6.0

STOPSIGNAL SIGINT

RUN apt-get update \
    && apt-get install -y --allow-unauthenticated \
        libc6-dev \
        libgdiplus \
        libx11-dev \
     && rm -rf /var/lib/apt/lists/*

ENV DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=false

RUN sed -i'.bak' 's/$/ contrib/' /etc/apt/sources.list
RUN apt-get update; apt-get install -y ttf-mscorefonts-installer fontconfig

RUN fc-cache -f -v

WORKDIR /app

COPY . .

LinuxPdf.PNG (78.2 KB)

Hi @asad.ali
Thank you so much for looking into this issue.

I am okay with the above docker file and code you refered above or else u can wrote your own code, but the code should run under .net6 in linux environment.

Convert the given sample html file into tiff image, attach the docker file&code. I will use that and run in my system.

I am also able to convert html to pdf, but here only issue with html to tiff conversion. Please check from your side once.

@Chenchu

Sure, we will further investigate and share our feedback with you soon.