In our Laravel project, I utilized browsershot to create A4 pdf files. In the headerHtml of browsershot, I wanted to display an image logo that would automatically adjust its size to fit a div container while preserving its aspect ratio. While following this guide on auto-resizing images to fit a "div" container, I was successful in achieving the desired outcome with other images of varying dimensions. However, there is one specific image where the bottom side is getting cropped.
Here is the image where the bottom side is being clipped:
https://i.sstatic.net/8tYkC.png
The particular image experiencing cropping at the bottom: 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>
To replicate using browsershot, you can use placeholder 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');
It's important to convert the image to base64 for it to work correctly in headerHtml.
logo base64: https://pastebin.com/x52Y8M6z
or
convert the logo to base64:
I'm facing challenges with this specific image, any advice would be greatly appreciated. Thank you!