htmlcsslaravelbrowsershot

How do I resize an image without it getting cropped while maintaining aspect ratio in browsershot headerHtml?

I used browsershot to generate A4 pdf documents in our Laravel project. On my browsershot headerHtml, I need to display one image logo which should automatically resize to fit a div container while maintaining its aspect ratio. Following this tutorial How do I auto-resize an image to fit a "div" container?, I was able to achieve the desired result with other images with different dimensions, but there this one image that has its bottom side getting cropped.

Image bottom side getting cropped:

enter image description here

The particular image that is getting its bottom side cropped: https://ibb.co/FJKFSpS

Header blade file:

@props(['proposal_title', 'proposal_logo', 'file_type'])
<header style="outline: 1px solid blue; opacity: 0.6; color: #672F09; width: 100%; font-size: 18px; padding: 0 2cm; display: flex; justify-content: space-between; align-items: center;">
    <div style="outline: 1px solid red; width: 75px; height: 75px;">
        <img style="object-fit: contain; height: 100%; width: 100%;" src="data:image/{{ $file_type }};base64,{{ $proposal_logo }}" alt="Logo">
    </div>
    <p style="text-align: center; font-weight: 500; width: 70%;">{{ $proposal_title }}</p>
    <div style="width: 75px; height: 75px;"></div>
</header>

Replicate with browsershot, you may use dummy data for the $html and $footer blade file.

$html = view('grantproposals.index', ['grant_proposal' => $grant_proposal])->render();
$header = view('grantproposals._header', ['proposal_title' => $grant_proposal->proposal_title, 'proposal_logo' => $pdo->image->grant_proposal_logo, 'file_type' => $pdo->image->file_type])->render();
$footer = view('grantproposals._footer', ['proposal_title' => $grant_proposal->proposal_title])->render();

            Browsershot::html($html)
                ->showBrowserHeaderAndFooter()
                ->headerHtml($header)
                ->footerHtml($footer)
                ->format('A4')
                ->waitUntilNetworkIdle()
                ->margins(35.4, 0, 25.4, 0)
                ->newHeadless()
                ->timeout(120)
                ->save($path . 'filename.pdf');

Note: We need to convert the image to base64 for it to work on headerHtml.

logo base64: https://pastebin.com/x52Y8M6z

or

convert the logo to base64: https://base64.guru/converter/encode/image

I've been stuck with this particular image, please advice thank you!

Solution

  • Unknown as yet reason but the image initially looked corrupted in PNG translation If we inspect in a viewer we see it like this, but later tests suggest that neither quality nor encoding are the problem, however it may be a trigger ?

    BAD

    It should be a JPEG like this enter image description here

    but in Chromium Edge is seen as described lower blanked enter image description here

    In Firefox it also gets truncated but at a different point enter image description here
    and it alters with zoom enter image description here

    So finally it seems the base64 contents are 100% valid, just not compatible with the CSS fitting method in HTML.
    It is in effect being used as if an imported frame thus limited to a default height, regardless of image quality.