Sample Code: Create a Custom Image Size Page Screenshot

In this section, let us talk about the image size. Dependence on where and how you want to use a image, you use a different size of images. For example, if you want to use a image to show how the website will looks like to your customer, maybe you just need a 300x300 picture. If you want to show the very detail of the page to your customer, you may need a 1024x768 image. But large image will take time to download and display. If you display more than 2 large images on one page, it will be really slow to load the page.So, before you send the request, please make the best choice for yourself.

System Predefined Sizes:

In our system, we already predefined the size for all devices as following:

With those sizes, your results will be good enough for most of cases and the loading speed is fine.

Here are some samples pictures show you how it exactly looks like.

Limitations

Image's width be larger than the screen's width. It is very easy to understand. If we take a screenshot on a screen which resolution is 800x600, it does not make any sense to send you a image is 1024x768 with a big blank border. Maybe you will ask why only the width. That is a very good question. Because in most of cases, we will only can see part of the page. If you want to get full page screenshot, we will not cut or shrink the image.

Scale Logic

If you set p2i_size = 300x300, we will scale the screenshot to fix the rectangle. Here are some possible situation.

If the screenshot result is a square.

If the screenshot result is rectangle.

If you set p2i_size = 300x0, we will scale the width of screenshot to 300 and scale the height accordingly. For example a 600x1200 screenshot will be resize to 300x600.

1200

300

600

If you set p2i_size = 0x300, we will scale the height of screenshot to 300 and scale the width accordingly. For example a 600x1200 screenshot will be resize to 150x300.

1200

300

150

Generate a Small Website Screenshot

Rest API

http://api.page2images.com/restfullink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=150x150

IMG API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=150x150'>

JS API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY& p2i_size=150x150'>

<script src="http://www.page2images.com/js/p2i.js"></script>
<script> var p2i=new page2images(); p2i.thumbnail('demo');</script>

Generate a Big Website Screenshot

Rest API

http://api.page2images.com/restfullink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=600x600

IMG API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=600x600'>

JS API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY& p2i_size=600x600'> 

<script src="http://www.page2images.com/js/p2i.js"></script>
<script> var p2i=new page2images(); p2i.thumbnail('demo'); </script>

Generate Website Screenshot When You Only Konw the Width of a Full Page:

Rest API

http://api.page2images.com/restfullink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=200x0

IMG API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=200x0'>

JS API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY& p2i_size=200x0'> 

<script src="http://www.page2images.com/js/p2i.js"></script>
<script> var p2i=new page2images(); p2i.thumbnail('demo'); </script>

Generate Website Screenshot When You Only Konw the Height of a Full Page:

Rest API

http://api.page2images.com/restfullink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=0x200

IMG API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY&p2i_size=0x200'>

JS API

<img src='http://api.page2images.com/directlink?p2i_url=TARGET_URL&p2i_key=YOUR_API_KEY& p2i_size=0x200'> 

<script src="http://www.page2images.com/js/p2i.js"></script>
<script> var p2i=new page2images(); p2i.thumbnail('demo'); </script>

Using our Code Generator, you can quickly generate the source code for IMG Tags. Use page2images code generator for website screenshot.

Premium and XLarge rate plan users get free help with writing and testing code. Please contact us if you need help.