facebook

The Way of Converting an Html to an Image and More…

By Meghnath Kar

html to an imagre

The Way of Converting an Html to an Image and More…

It is not so hard to send someone an email whether it is a scheduled job or any other method, just use Mail send method and the mail will be on its way.

But what if you want to add a graph or a chart to your email template then it is not as easy as it might seem to you, like showing the chart in a Laravel template file. Because to view or to show a chart you need javascript to work, and for javascript to work you need to render the template, but in the case of sending an email the email template doesn’t get rendered, so the javascript doesn’t work and for that, the chart doesn’t get rendered. In that case, a package called Browsershot will come in handy.
Because this package uses headless Chrome browser to render the template in the background and captures a screenshot of the rendered area.
To use this package first you have run “composer require spatie/browser shot”. This command will install the browser shot package to your project, and after that, you are gonna need to install “Puppeteer” which is the headless chromium-browser, for that the command is “npm install puppeteer”. As for your requirements you can use the –global flag to install it globally.
To use this package in your file just add the following line at the start of the page “use Spatie\Browsershot\Browsershot;”

Browser shot::URL(‘URL of the page’)->save($pathToImage);
This is a basic function which will create an image of the specified URL of the webpage. By default, it will always create a png file but you can change it by using setScreenshotType() function, like

Browser shot::URL(‘URL of the page’)
->setScreenshotType(‘jpeg’, 100)
->save($pathToImage);

Here the second parameter defines the quality of the specified jpeg. Also, this package can be used to save the captured area as a Pdf.

To specify the window size you want to take a snapshot just use the window size(640, 480) function, and to specify the area you want to capture just use clip($x, $y, $width, $height) function. Although to change the greyscale of the captured picture greyscale() function can help you with that.
You can also wait for a specific javascript function until it returns true by using wait for function() function. This is useful if you need to wait for a task on javascript which is not related to the network.

To add style to your page just use the specified function
setOption(‘addStyleTag’, json_encode([‘content’ => ‘body{ font-size: 14px; }’])).

Now for some reason, Chrome doesn’t run using the root user in Linux environment, so to run the Chrome using root user you need to disable the sandboxing of the Chrome, for that use noSandbox()
function. Because running the headless Chrome on the remote server it requires root user.

Remember this Browsershot package uses npm package called puppeteer so it needs npm to run, for that to find the npm if it is not found automatically you need set include path function and in that function, you can pass the location the npm, like $PATH:/usr/local/bin.

Last but not least if you use a URL of the same server where the project of yours is hosted then it will throw an Exception, you need to handle it to maintain the workflow of your project, and when that Exception happens, solve that yourself.

Meghnath Kar Author
Web Developer , Openweb Solutions

Web Developer at Openweb Solutions

Posts created 2

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares