Changing viewport

The Canvasflare API provides the capability to create screenshots with various viewport settings. This feature enables you to see how a website appears on different displays, offering insights into its responsiveness and visual consistency across devices.

viewport_width param

viewport_width (number, required) - This allows you to determine the width of Chrome's viewing area, which will deactivate the auto-cropping feature. Default value is 1366. Min. 480, max. 1920.

viewport_height param

viewport_height (number, required) - This allows you to specify the height of Chrome's viewing area, which in turn deactivates the auto-cropping feature. Default value is 766. Min. 480, max. 1920.

Required parameters

Both the viewport_width and viewport_height parameters need to be established if you choose to use either one.

Let's explore how it works. Below is a screenshot using the default viewport settings:

Next, let's adjust the viewport values to 1080 x 1920 to simulate a mobile device. Here, the viewport_width is set to 1080, and the viewport_height is set to 1920. Here's what it looks like:

Check out our code samples below for more details.

Python

import requests

api_key = 'YOUR_API_KEY'
base_url = 'https://api.canvasflare.com/screenshot'
params = {
    'api_key': api_key,
    'url': 'https://getbootstrap.com',
    'viewport_width': 1080,
    'viewport_height': 1920
}

response = requests.get(base_url, params=params)
if response.status_code == 200:
    print('Image created:', response.json())
else:
    print('Error creating image:', response.text)

Java

import java.net.URI;
import java.net.URLEncoder;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.nio.charset.StandardCharsets;
import java.io.IOException;

public class CanvasflareScreenshot {
    public static void main(String[] args) {
        try {
            String apiKey = "YOUR_API_KEY";
            String targetUrl = "https://getbootstrap.com";
            int viewport_width = 1080;
            int viewport_height = 1920;

            String encodedApiKey = URLEncoder.encode(apiKey, StandardCharsets.UTF_8);
            String encodedUrl = URLEncoder.encode(targetUrl, StandardCharsets.UTF_8);
            String params = "api_key=" + encodedApiKey + "&url=" + encodedUrl + "&viewport_width=" + viewport_width + "&viewport_height=" + viewport_height;

            String endpoint = "https://api.canvasflare.com/screenshot?" + params;
            HttpClient client = HttpClient.newHttpClient();
            HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create(endpoint))
                .header("Content-Type", "application/json")
                .build();

            HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

            if (response.statusCode() == 200) {
                System.out.println("Image created: " + response.body());
            } else {
                System.err.println("Error creating image: " + response.body());
            }
        } catch (IOException | InterruptedException e) {
            System.err.println("Error during request execution: " + e.getMessage());
        }
    }
}

Go

package main

import (
    "fmt"
    "io/ioutil"
    "net/http"
    "net/url"
)

func main() {
    baseURL := "https://api.canvasflare.com/screenshot"

    params := url.Values{}
    params.Add("api_key", "YOUR_API_KEY")
    params.Add("url", "https://getbootstrap.com")
    params.Add("viewport_width", "1080")
    params.Add("viewport_height", "1920")

    endpoint := fmt.Sprintf("%s?%s", baseURL, params.Encode())

    req, err := http.NewRequest("GET", endpoint, nil)
    if err != nil {
        fmt.Println("Error creating request:", err)
        return
    }

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        fmt.Println("Error sending request:", err)
        return
    }
    defer resp.Body.Close()

    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        fmt.Println("Error reading response body:", err)
        return
    }

    if resp.StatusCode == 200 {
        fmt.Printf("Image created: %s\n", body)
    } else {
        fmt.Printf("Error creating image: %s, Status Code: %d\n", body, resp.StatusCode)
    }
}

Dart

import 'package:http/http.dart' as http;

void main() async {
  final baseUri = Uri.parse('https://api.canvasflare.com/screenshot');
  final params = {
    'api_key': 'YOUR_API_KEY',
    'url': 'https://getbootstrap.com',
    'viewport_width': 1080,
    'viewport_height': 1920
  };

  final uri = baseUri.replace(queryParameters: params);

  final response = await http.get(
    uri,
  );

  if (response.statusCode == 200) {
    print('Image created: ${response.body}');
  } else {
    print('Error creating image: ${response.statusCode} - ${response.body}');
  }
}

C#

using System;
using System.Net.Http;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        string apiKey = "YOUR_API_KEY";
        string targetUrl = "https://getbootstrap.com";
        int viewport_width = 1080;
        int viewport_height = 1920;

        string endpoint = $"https://api.canvasflare.com/screenshot?api_key={apiKey}&url={targetUrl}&viewport_width={viewport_width}&viewport_height={viewport_height}";

        using (HttpClient client = new HttpClient())
        {
            try
            {
                HttpResponseMessage response = await client.GetAsync(endpoint);

                if (response.IsSuccessStatusCode)
                {
                    string responseBody = await response.Content.ReadAsStringAsync();
                    Console.WriteLine("Image created: " + responseBody);
                }
                else
                {
                    Console.WriteLine("Error creating image: " + response.StatusCode);
                }
            }
            catch (HttpRequestException e)
            {
                Console.WriteLine("\nException Caught!");
                Console.WriteLine("Message :{0} ", e.Message);
            }
        }
    }
}

Kotlin

import java.net.HttpURLConnection
import java.net.URL

fun main() {
    val apiKey = "YOUR_API_KEY"
    val targetURL = "https://getbootstrap.com"
    val viewport_width = 1080
    val viewport_height = 1920

    val endpoint = URL("https://api.canvasflare.com/screenshot?api_key=$apiKey&url=$targetURL&viewport_width=$viewport_width&viewport_height=$viewport_height")

    val connection = endpoint.openConnection() as HttpURLConnection
    try {
        connection.requestMethod = "GET"
        connection.connect()

        val responseCode = connection.responseCode
        if (responseCode == HttpURLConnection.HTTP_OK) {
            println("Response Code: $responseCode")
            println("Response Message: ${connection.responseMessage}")
            
            connection.inputStream.bufferedReader().use {
                val response = it.readText()
                println("Response Body: $response")
            }
        } else {
            println("Request failed with response code: $responseCode")
        }
    } catch (e: Exception) {
        e.printStackTrace()
    } finally {
        connection.disconnect()
    }
}

C++

#include <iostream>
#include <string>
#include <curl/curl.h>

int main() {
    std::string base_url = "https://api.canvasflare.com/screenshot";
    std::string api_key = "YOUR_API_KEY";
    std::string target_url = "https://getbootstrap.com";
    int viewport_width = 1080;
    int viewport_height = 1920;

    std::string endpoint = base_url + "?api_key=" + curl_easy_escape(nullptr, api_key.c_str(), 0)
                                    + "&url=" + curl_easy_escape(nullptr, target_url.c_str(), 0)
                                    + "&viewport_width=" + std::to_string(viewport_width)
                                    + "&viewport_height=" + std::to_string(viewport_height);

    CURL* curl = curl_easy_init();
    if (curl) {
        curl_easy_setopt(curl, CURLOPT_URL, endpoint.c_str());

        curl_easy_setopt(curl, CURLOPT_CUSTOMREQUEST, "GET");

        CURLcode res = curl_easy_perform(curl);
        if (res == CURLE_OK) {
            std::cout << "Request sent successfully" << std::endl;
        } else {
            std::cerr << "Error sending request: " << curl_easy_strerror(res) << std::endl;
        }

        curl_easy_cleanup(curl);
    }

    return 0;
}

Curl

use LWP::UserAgent;
use HTTP::Request::Common qw(POST);
use JSON;

my $endpoint = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY";

my $payload = {
    url => "https://httpbin.org",
    viewport_width => 800,
    viewport_height => 600
};

my $ua = LWP::UserAgent->new;
my $req = POST $endpoint, Content_Type => 'application/json', Content => encode_json($payload);

my $response = $ua->request($req);

if ($response->is_success) {
    print "Image created: " . $response->decoded_content . "\n";
} else {
    print "Error creating image: " . $response->status_line . "\n";
}

base_url="https://api.canvasflare.com/screenshot"
api_key="YOUR_API_KEY"
target_url="https://getbootstrap.com"
viewport_width=1080
viewport_height=1920

response=$(curl -G -X GET "$base_url" --data-urlencode "api_key=$api_key" --data-urlencode "url=$target_url" -d "viewport_width=$viewport_width" -d "viewport_height=$viewport_height")

if [ $? -eq 0 ]; then
  echo "Image created: $response"
else
  echo "Error creating image: $response"
fi