Dart

Example of image generation using Dart.

The Canvasflare API enables image creation from specified HTML and CSS. Below is how you can use this API in Dart to generate an image.

Rendering an Image

Send a POST request to https://api.canvasflare.com/image with the required parameters to render an image.

Parameters

• html - The HTML content you wish to render, e.g., <div>Your content</div>.
• css - The CSS styling for your rendered image, e.g., .h1 { color: red }.
• device_scale - Modifies the pixel density of the screenshot.
• viewport_width - The width of the Chrome viewport.
• viewport_height - The height of the Chrome viewport.
• viewport_device - Emulates a given device's metrics and user agent.
• viewport_has_touch - Indicates whether the viewport supports touch events.
• viewport_landscape - Indicates whether the viewport is in landscape mode.
• viewport_mobile - Specifies whether the meta viewport tag is considered.
• full_page - If set to true screenshots entire webpage.
• selector - A CSS selector corresponding to an element in the HTML.
• ms_delay - Additional delay to ensure completion of JavaScript execution.
• user_agent - An user agent for the request.

Example Request in Dart

Use the http package in Dart for sending HTTP requests:

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

void main() async {
  const endpoint = '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,
  };

  var headers = {
    'Content-Type': 'application/json'
  };

  var response = await http.post(
    Uri.parse(endpoint),
    headers: headers,
    body: jsonEncode(payload),
  );

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

Response

The API response will return a URL to the generated image that you can download or display.

Make Your Image URL Downloadable

You can add the parameter ?dl=true to the image URL to make the browser download the image automatically. For example:

https://api.canvasflare.com/image/8d063c49-3f15-46c1-91c7-9cf61e6758c6?dl=true

Dart Environment

Ensure you have the necessary Dart environment and the http package installed to run this code. You can add the http package to your pubspec.yaml file under dependencies.