Urlbox/Screenshots

Capture highly accurate webpage screenshots of any site using Urlbox.io in PHP

This package uses the Urlbox.io screenshot as a service to generate website screenshots.

Installation

This package can be installed through Composer.

composer require urlbox/screenshots

When using Laravel there is a service provider that you can make use of:

// app/config/app.php

'providers' => [
    '...',
    'Urlbox\Screenshots\UrlboxProvider'
];

setup your API keys:

// config/services.php

'urlbox' => [
    'key'    => env('URLBOX_KEY'),
    'secret' => env('URLBOX_SECRET')
];

and in your .env file:

# URLBOX
URLBOX_KEY=YOUR_URLBOX_KEY
URLBOX_SECRET=YOUR_URLBOX_SECRET

Usage

You will need a Urlbox account to use this package. Please signup here and get your API Key and Secret from the Urlbox dashboard once you have logged in.

Here is a sample call to generate a Urlbox screenshot URL:

    use Urlbox\Screenshots\Urlbox;
    $urlbox = Urlbox::fromCredentials('API_KEY', 'API_SECRET');
    // only required option is a url:
    $options['url'] = 'example.com';
    // specify any other options to augment the screenshot...
    $options['width'] = 1280;
    $options['height'] = 1024;
    // Create the Urlbox URL
    $urlboxUrl = $urlbox->generateUrl($options);
    // $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'
    // Generate a screenshot by loading the Urlbox URL in an img tag:
    echo '<img src="'.$urlboxUrl.'" alt="Test screenshot generated by Urlbox">'

If you're using Laravel and have setup the service provider, you can use the Facade provided:

use Urlbox\Screenshots\Facades\Urlbox;

$options["url"] = "example.com";
$urlboxUrl = Urlbox::generateUrl($options);
// $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'

You can now use the result ($urlboxUrl) by placing it inside an <img/> tag as the src parameter.

When you load the image, a screenshot of example.com will be returned.

The following options can be passed to the generateUrl method:

| Option | Default | Description | | --------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | url | - | The URL of the website you want to screenshot (Required) | | width | 1280 | Viewport width of the browser in pixels | | height | 1024 | Viewport height of the browser in pixels | | selector | - | Take a screenshot of the element that matches this selector | | thumb_width | - | Width in pixels of the generated thumbnail, leave off for full-size screenshot | | format | png | Image format of the resulting screenshot image (png or jpg) | | user_agent | - | User-Agent string used to emulate a particular client. | | cookie | - | Set a cookie value before taking a screenshot. E.g. OptIn=true. Can be set multiple times to set more than one cookie. | | delay | - | Amount of time to wait in milliseconds before urlbox takes the screenshot | | wait_for | - | Waits for the element specified by this selector to be visible on the page before taking a screenshot | | timeout | 30000 | Amount of time to wait in milliseconds for the website at url to respond | | full_page | false | Specify whether to capture the full-length of the website | | flash | false | Enable the flash plugin for flash using websites | | force | false | Take a fresh screenshot instead of getting a cached version | | ttl | 2592000 (30 days) | Short for 'time to live'. Number of seconds to keep a screenshot in the cache. Note the default is also the maximum value for this option. | | quality | 80 | JPEG only - image quality of resulting screenshot (0-100) | | disable_js | false | Turn off javascript on target url to prevent popups | | retina | false | Take a 'retina' or high definition screenshot equivalent to setting a device pixel ratio of 2.0 or @2x. Please note that retina screenshots will be double the normal dimensions and will normally take slightly longer to process due to the much bigger image size. | | click | - | Element selector that is clicked before taking a screenshot e.g. #clickme would click the element with id="clickme" | | hover | - | Element selector that is hovered before taking a screenshot e.g. #hoverme would hover over the element with id="hoverme" | | bg_color | - | Hex code or css color string. Some websites don't set a body background colour, and will show up as transparent backgrounds with PNG or black when using JPG. Use this setting to set a background colour. If the website explicitly sets a transparent background on the html or body elements, this setting will be overridden. | | crop_width | - | Crop the width of the screenshot to this size in pixels | | hide_selector | - | Hides all elements that match the element selector by setting their style to display:none !important;. Useful for hiding popups. | | highlight | - | Word to highlight on the page before capturing a screenshot | | highlightfg | white | Text color of the highlighted word | | highlightbg | red | Background color of the highlighted word | | use_s3 | false | Save the screenshot directly to the S3 bucket configured on your account |

Other implementations

• Node.js

Contributing

We are open to pull requests.

Security

If you discover any security related issues, please email services@urlbox.io instead of using the issue tracker.

About Urlbox

Urlbox is a premium Screenshot as a Service API. It lets you render highly accurate screenshots of webpages and display them anywhere you like. Urlbox.io.

License

The MIT License (MIT).