Restpack Browser Mockup API is an easy to use RESTful web service that can create browser mockups of screenshots and deliver the results in several formats. The service sits on a fully functional browser rendering engine with rich html / css / js capabilities.
With each API call, you must provide an authentication token. To create a new access token please refer to user tokens page on your account dashboard.
You can either provide the access token within the querystring or as a header.
access_token querystring parameter. As in https://restpack.io/api/browsermockup/v1/create?access_token={TOKEN}X-Access-Token header.Access token errors are represented in 4xx class HTTP errors.
In order to create a browser mockup, you simply need to invoke a GET request on the following URL. You can capture publicly accessible URL with GET Request, or Raw HTML string with POST Request.
| image_urlurl | The URL of screenshot image, including the protocol that you want to capture. Example: http://example.com |
| access_tokenstring | Your personal access token for API access. Example: XXXXXXXX |
| formatenum | Preferred image output format. Default: pngPattern: jpg | png | pdf |
| jsonboolean | Return a JSON response with the resulting image's URL instead of the image itself. Default: false |
| vertical_margininteger | Preferred vertical margin on top and below the screenshot. Default: 50Min: 10Max: 4096 |
| horizontal_margininteger | Preferred horizontal margin on either side of the screenshot. Default: 75Min: 10Max: 4096 |
| grayscaleboolean | Render the screenshot with grayscale filter Default: false |
| background_colorstring | The background color for the mockup. Any css color naming convention can be used. E.g. red, #ff0000, rgba(255, 0, 0, 0.3) |
| panel_typeenum | The type of panel to display the image on. Default: plainPattern: none | plain | browser |
| image_urlurl | The URL of screenshot image, including the protocol that you want to capture. Example: http://example.com |
| access_tokenstring | Your personal access token for API access. Example: XXXXXXXX |
| formatenum | Preferred image output format. Default: pngPattern: jpg | png | pdf |
| jsonboolean | Return a JSON response with the resulting image's URL instead of the image itself. Default: false |
| vertical_margininteger | Preferred vertical margin on top and below the screenshot. Default: 50Min: 10Max: 4096 |
| horizontal_margininteger | Preferred horizontal margin on either side of the screenshot. Default: 75Min: 10Max: 4096 |
| grayscaleboolean | Render the screenshot with grayscale filter Default: false |
| background_colorstring | The background color for the mockup. Any css color naming convention can be used. E.g. red, #ff0000, rgba(255, 0, 0, 0.3) |
| panel_typeenum | The type of panel to display the image on. Default: plainPattern: none | plain | browser |
BrowserMockupPACK can generate JPG, and PNG files. The default is PNG, which is rendered with intact text reporesentations and a compact format. The JPG output provides the smaller sizes but has a fixed 80% quality setting.
http GET 'https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png' \
x-access-token:TOKENcurl --request GET \
--url 'https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png' \
--header 'x-access-token: TOKEN'var request = require("request");
var options = { method: 'GET',
url: 'https://restpack.io/api/browsermockup/v1/create',
qs:
{ image_url: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
format: 'png' },
headers: { 'x-access-token': 'TOKEN' } };
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
});
require 'uri'
require 'net/http'
url = URI("https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Get.new(url)
request["x-access-token"] = 'TOKEN'
response = http.request(request)
puts response.read_bodyimport http.client
conn = http.client.HTTPSConnection("restpack.io")
headers = { 'x-access-token': "TOKEN" }
conn.request("GET", "/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png", headers=headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))package main
import (
"fmt"
"net/http"
"io/ioutil"
)
func main() {
url := "https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png"
req, _ := http.NewRequest("GET", url, nil)
req.Header.Add("x-access-token", "TOKEN")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"x-access-token: TOKEN"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}var client = new RestClient("https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png");
var request = new RestRequest(Method.GET);
request.AddHeader("x-access-token", "TOKEN");
IRestResponse response = client.Execute(request);HttpResponse<String> response = Unirest.get("https://restpack.io/api/browsermockup/v1/create?image_url=https%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F2x%2Fgooglelogo_color_272x92dp.png&format=png")
.header("x-access-token", "TOKEN")
.asString();