Author: Dave Smith
Posted on: 2016-01-12
Package: PHP Ultimate Web Page Capture
That is not something easy to achieve in an environment on which you can only run PHP. An alternative solution is to resort to Web services that can capture page screenshots for you.
Read this article to learn how to use the screenshotlayer.com Web service to capture page screens with the ability to scale the image to a given size, as the possibility to inject new styles in the page before the screen is captured to suit your needs.
Introduction
Creating the Image Display Interface
Our Friend's Page
CSS Style Injection
Putting it All Together
Conclusion
Introduction
In this article, I will be using the PHP Ultimate Web Page Capture package which interfaces with an API provided by screenshotlayer.com. Not only will you be able to get those nice looking images, you will have access to the advanced features already mentioned in the summary, and more.
To demonstrate how to use this package, I will be working with a link exchange scenario. This isn't going to be one of those boring exchanges that provide the site name with a hyperlink to it. Our exchange will be a thumbnail image of our friends Web site with the hyperlink.
The examples I will be using are not production ready and are only meant to demonstrate the usage. They do not properly sanitize user input or keep the script from being called remotely, just to make the examples simple and short.
Creating the Image Display Interface
The first thing we need to do is set up the PHP script that will dynamically deliver an <img> tag to our markup. Using your favorite text editor, create a new file called showimg.php and add the following code to it.
<?php
include( 'screenshot.class.php' );
$screenShot = new screenShot( $_REQUEST['url'], 'jpg');
$screenShot->setParam( 'width', 300);
$screenShot->setParam( 'css_url', 'http://www.mysite.com/inject.css');
$screenShot->capturePage();
echo $screenShot->capture;
?>
On the first line we are including the screenshot class. If the class is not going to be in the same location as your showimg.php file, you would change this by providing the correct path to include it.
On the second line we are instantiating the class to capture the Web page passed in the request variable 'url' as a jpg image. I will be showing you how the key/value pair for the URL works in the next section on Our friends page.
On the third line we are setting the API parameter 'width' so that our image is returned at 300 pixels wide. We use the setParam class method to set any API parameter.
On the fourth line we are injecting our own style using the css_url parameter. The file containing the CSS must be accessible via the Web for the API to access it, so you would change the mysite.com domain to the actual domain where inject.css is located. I will be showing you how this works in the section on Style injection.
On the fifth line we are querying the API to capture the page. I will discuss managing the captured binary in the section on Working with captured binary.
On the sixth line we are displaying the image.
Our Friend's Page
Now that we have an interface, we need a Web page to display all of our friends Web sites. Create a new html file called friends.html and add the following markup to it.
<!DOCTYPE html>
<html>
<head>
<title>Friends of my site</title>
<style>
img{
margin: 10px;
}
</style>
</head>
<body>
<h3>Please take a moment to visit my friends</h3>
<div>
<a href = "http://www.google.com" title="My First Friend">
<img src = "showimg.php?url=http://www.google.com">
</a>
<a href = "http://www.phpclasses.org" title="My Second Friend">
<img src = "showimg.php?url=http://www.phpclasses.org" alt="My Second Friend"></a>
<a href="http://www.yahoo.com" title="My third Friend">
<img src="showimg.php?url=http://www.yahoo.com" alt="My Third Friend">
</a>
</div>
</body>
</html>
The important part we want to look at here are the <img> tags. Our source is the showimg.php file we created earlier and we are passing the key/value pair for the URL we want to capture an image of.
If the showimg.php file is not in the same location as the friends.html file, you could provide the full URL o it.
Notice that the line in our interface which displays the image
echo $screenShot->capture;
is outputting the raw binary into the <img> tags source, so the browser will render it as if it where an actual image file.
We can continue to add as many friends as we want and each <img> tag will call the interface to capture and display the Web page we specified using the URL key/value pair.
CSS Style Injection
We have the ability to modify the image that is created by injecting our own style to the original Web page. Create a new file called inject.css and add the following CSS to it.
body{
border: solid thick black;
}We could modify the original however we want using CSS, however for our purposes we are only adding a black border around the body.
The injection takes place on the following line of our interface
$screenShot->setParam('css_url','http://www.mysite.com/inject.css');As I mentioned earlier, the CSS file that we use needs to be Web accessible, so that the API can fetch it. The URL provided will need to be changed to reflect the actual location of the inject.css file.
If you would prefer not to inject any CSS, you would simply remove or comment out the injection line from the interface file.
Putting it All Together
We now have all the files we need for our extra special link exchange page with our friends. Upload them to a Web accessible location on you server and point your browser to the friends.html page.
If this is the first time the images are being generated, it may take a few moments for them to appear. After they have been generated this first time, by default the API will store them for 30 days before regenerating them again.
30 days is the maximum time an image will be stored, however you can use the 'ttl' parameter to tell the API how many seconds to store the image, should you want them to be regenerated sooner. You could even use the 'force' parameter set to a value of 1 to force regeneration instead of using a saved image.
What is really nice about this feature is that your account is not charged for images which have been saved. So using the free plan, you have 100 snapshots available every 30 days, which means it will support up to 100 friends before you will need to upgrade to one of the premium plans.
Conclusion
In this article we have only touched the surface of what is possible. I encourage you to read the documentation that comes with the package and the API documentation to see the full list of parameters you can set.
The package itself also includes methods for a simple <img> tag display, downloading the image and displaying the image directly to browser. So whatever you specific needs are when capturing a Web page image, the package should be able to handle them.
When you have outgrown the 100 free snapshots or need to be able to process more than one image at a time, the API offers premium plans to help you scale up your operation.
If you liked this article or you have a question about capturing Web page screenshots, post a comment here.
You need to be a registered user or login to post a comment
1,402,610 PHP developers registered to the PHP Classes site.
Be One of Us!
Login Immediately with your account on:
 |  | ||
 |  | ||
 |  |
Comments:
2. Fatal error: Call to undefined function getimagesizefromstring() - bill (2016-08-06 02:28)
Fatal error: Call to undefined function getimagesizefromstring()... - 2 replies
Read the whole comment and replies
1. PHP Ultimate Web Page Capture - Michael Scott McGinn (2016-01-14 10:40)
Great package... - 0 replies
Read the whole comment and replies
