Change image resolution

How to change resolution using viewport

device_scale param

The device_scale parameter plays a crucial role in determining the pixel density and resolution of the rendered image. Here's a detailed explanation:

• Type: Number
• Description: Modifies the pixel density of the screenshot. Higher values result in higher resolution images.
• Allowed Values:
  • 1: Standard resolution, equivalent to a regular monitor.
  • 2: High resolution, similar to a 4K monitor. This is the default value.
  • 3: Ultra-high resolution, providing the highest level of detail.
• Usage: Suitable for various scenarios. Use a lower value for faster rendering and less detail, or a higher value for detailed images, ideal for high-quality presentations or print.

Python

import requests

def change_image_resolution():
    url = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY"
    headers = {
        "Content-Type": "application/json",
    }
    data = {
        "html": "<div>High Resolution Image</div>",
        "device_scale": 3  # Higher value for higher resolution
    }

    response = requests.post(url, json=data, headers=headers)
    print(response.json())

change_image_resolution()

Java

import java.io.IOException;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;

public class ChangeImageResolutionExample {
    public static void main(String[] args) throws IOException {
        OkHttpClient client = new OkHttpClient();

        String url = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY";

        MediaType mediaType = MediaType.parse("application/json");
        RequestBody body = RequestBody.create(mediaType, "{\n    \"html\": \"<div>This is something</div>\",\n    \"css\": \".h1 { color: red }\",\n    \"device_scale\": 2,\n    \"viewport_width\": 640,\n    \"viewport_height\": 480,\n    \"ms_delay\": 500\n}");
        Request request = new Request.Builder()
            .url(url)
            .method("POST", body)
            .addHeader("Content-Type", "application/json")
            .build();

        Response response = client.newCall(request).execute();
        System.out.println(response.body().string());
    }
}

Go

package main

import (
    "bytes"
    "fmt"
    "net/http"
)

func main() {
    url := "https://api.canvasflare.com/render?api_key=YOUR_API_KEY"
    payload := []byte(`{
        "html": "<div>This is something</div>",
        "css": ".h1 { color: red }",
        "device_scale": 2,
        "viewport_width": 640,
        "viewport_height": 480,
        "ms_delay": 500
    }`)

    req, err := http.NewRequest("POST", url, bytes.NewBuffer(payload))
    if err != nil {
        fmt.Println("Error creating request:", err)
        return
    }

    req.Header.Set("Content-Type", "application/json")

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

    fmt.Println("Response Status:", resp.Status)
}

Dart

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

void main() async {
  final url = Uri.parse('https://api.canvasflare.com/render?api_key=YOUR_API_KEY');
  final payload = {
    'html': '<div>This is something</div>',
    'css': '.h1 { color: red }',
    'device_scale': 2,
    'viewport_width': 640,
    'viewport_height': 480,
    'ms_delay': 500,
  };

  final response = await http.post(
    url,
    headers: {
      'Content-Type': 'application/json',
    },
    body: jsonEncode(payload),
  );

  if (response.statusCode == 201) {
    final imageUrl = jsonDecode(response.body)['imageUrl'];
    print('Image created: $imageUrl');
  } else {
    print('Error creating image: ${response.statusCode}');
  }
}

C#

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

class Program
{
    static async Task Main()
    {
        var url = new Uri("https://api.canvasflare.com/render?api_key=YOUR_API_KEY");
        
        var payload = new
        {
            html = "<div>This is something</div>",
            css = ".h1 { color: red }",
            device_scale = 2,
            viewport_width = 640,
            viewport_height = 480,
            ms_delay = 500
        };

        using (var client = new HttpClient())
        {
            var content = new StringContent(Newtonsoft.Json.JsonConvert.SerializeObject(payload));
            content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/json");

            var response = await client.PostAsync(url, content);
            
            if (response.IsSuccessStatusCode)
            {
                var imageUrl = await response.Content.ReadAsStringAsync();
                Console.WriteLine($"Image created: {imageUrl}");
            }
            else
            {
                Console.WriteLine($"Error creating image: {response.StatusCode}");
            }
        }
    }
}

Kotlin

import okhttp3.MediaType.Companion.toMediaType
import okhttp3.OkHttpClient
import okhttp3.Request
import okhttp3.RequestBody.Companion.toRequestBody

fun main() {
    val url = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY"

    val payload = """
        {
            "html": "<div>This is something</div>",
            "css": ".h1 { color: red }",
            "device_scale": 2,
            "viewport_width": 640,
            "viewport_height": 480,
            "ms_delay": 500
        }
    """.trimIndent()

    val client = OkHttpClient()
    val request = Request.Builder()
        .url(url)
        .post(payload.toRequestBody("application/json".toMediaType()))
        .build()

    client.newCall(request).execute().use { response ->
        if (response.isSuccessful) {
            val imageUrl = response.body?.string()
            println("Image created: $imageUrl")
        } else {
            println("Error creating image: ${response.code}")
        }
    }
}

C++

#include <iostream>
#include <curl/curl.h>
#include <nlohmann/json.hpp>

int main() {
    CURL *curl;
    CURLcode res;

    // Set the API endpoint and API key
    std::string url = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY";

    // Create a JSON payload with the request parameters
    nlohmann::json payload = {
        {"html", "<div>This is something</div>"},
        {"css", ".h1 { color: red }"},
        {"device_scale", 2},
        {"viewport_width", 640},
        {"viewport_height", 480},
        {"ms_delay", 500}
    };

    // Initialize libcurl
    curl_global_init(CURL_GLOBAL_DEFAULT);
    curl = curl_easy_init();

    if (curl) {
        // Set the HTTP POST request with the payload
        struct curl_slist *headers = NULL;
        headers = curl_slist_append(headers, "Content-Type: application/json");

    curl_easy_setopt(curl, CURLOPT_CUSTOMREQUEST, "POST");
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_POSTFIELDS, payload.dump().c_str());
        curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);

        // Perform the HTTP request
        res = curl_easy_perform(curl);

        // Check for errors and handle the response
        if (res == CURLE_OK) {
            long response_code;
            curl_easy_getinfo(curl, CURLINFO_RESPONSE_CODE, &response_code);
            if (response_code == 201) {
                std::string image_url;
                curl_easy_getinfo(curl, CURLINFO_EFFECTIVE_URL, &image_url);
                std::cout << "Image created: " << image_url << std::endl;
            } else {
                std::cerr << "Error creating image: HTTP " << response_code << std::endl;
            }
        } else {
            std::cerr << "Error creating image: " << curl_easy_strerror(res) << std::endl;
        }

        // Clean up
        curl_easy_cleanup(curl);
        curl_slist_free_all(headers);
    }

    // Cleanup libcurl
    curl_global_cleanup();

    return 0;
}

Curl

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

# Set the API endpoint and API key
my $url = "https://api.canvasflare.com/render?api_key=YOUR_API_KEY";

# Create a JSON payload with the request parameters
my %payload = (
    html => "<div>This is something</div>",
    css => ".h1 { color: red }",
    device_scale => 2,
    viewport_width => 640,
    viewport_height => 480,
    ms_delay => 500
);

my $json_payload = encode_json \%payload;

# Create a user agent and POST request
my $ua = LWP::UserAgent->new;
my $request = POST($url, Content_Type => 'application/json', Content => $json_payload);

# Perform the HTTP request
my $response = $ua->request($request);

# Check for success and handle the response
if ($response->is_success) {
    my $image_url = $response->decoded_content;
    print "Image created: $image_url\n";
} else {
    print "Error creating image: " . $response->status_line . "\n";
}

# Set the API endpoint and API key
endpoint="https://api.canvasflare.com/render?api_key=YOUR_API_KEY"

# Create a JSON payload with the request parameters
payload='{
  "html": "<div>This is something</div>",
  "css": ".h1 { color: red }",
  "device_scale": 2,
  "viewport_width": 640,
  "viewport_height": 480,
  "ms_delay": 500
}'

# Send a POST request using curl
response=$(curl -X POST $endpoint -H "Content-Type: application/json" -d "$payload")

# Check for success and handle the response
if [ $? -eq 0 ]; then
  echo "Image created: $response"
else
  echo "Error creating image: $response"
fi