Image output

Birthday invite card

Autogenerated invite graphic for a party.

This example image shows a fun Google Font over an SVG background. Swap in your own text to autogenerate personalized messages.

Interactive example

Edit and render this image

Change the HTML, CSS, or API options. The browser preview updates as you edit; select Image to render the final output through the API.

Content

Adjust how content is rendered by adjusting these settings.

Url ?

Pass a publicly available URL and the API will screenshot it. This overrides any HTML. (Only applies when a URL is provided)

Google Fonts ?

Google fonts to be loaded. Example: Roboto. Multiple fonts can be loaded like this: Roboto|Open Sans. You must also set the font-family in your CSS to use the loaded font.

Selector ?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Transparent Background ?

Remove the background of the rendered image.

Image size & Viewport

By default images are cropped to the outermost HTML element or the chosen selector. Adjust viewport and sizing settings below.

Full Screen ?

Take a screenshot of the entire screen (Only applies when a URL is provided)

Device Scale ?

Adjusts the pixel ratio for the screenshot. The default is 2 which is equivalent to a 4K monitor.

Viewport ?

Height

Width

Set the height and width of Chrome's viewport. Setting a viewport disables automatic cropping.

Landscape Viewport

Set the viewport to landscape orientation.

Mobile Viewport

Instructs the viewport to behave as if it's being viewed from a mobile device.

Touch Viewport

Instructs the viewport to behave as if it is being viewed on a device supporting touch events.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.

Ms Delay ?

Adds extra time for JavaScript to execute. Use this if you're seeing a blank image and are using JavaScript.
Default: 0. Start with 500 if needed.

Max Wait Ms ?

Sets a limit on time to wait until the screenshot is taken. Use this if your page loads a lot of extra irrelevant content, and you want to reduce the render time.

Render When Ready? ?

Check to control when the image is generated.
Call ScreenshotReady() from JavaScript in your code to trigger the image generation.

Browser Context

These settings will impact how Chrome is started, giving you more control when taking screenshots.

Color Scheme ?

Set Chrome to render assuming the user has explicitly set their browser to Light or Dark mode.

Media Type

Set Chrome to render as if it's being set to print or screen mode.

Timezone ?

Render your image with Chrome set to a specified timezone.

Block Consent Banners ?

Attempt to block cookie/consent banners from displaying (Only applies when a URL is provided)

Identify as HCTI

Send X-HCTI-SCREENSHOT: 1 with the top-level page navigation (Only applies when a URL is provided)

Example code

Use this request in your app

Choose a language and copy a complete request using this example's HTML, CSS, and API options.

require "json"
require "net/http"
require "uri"

request = {
    html: <<-'HCTI_HTML',
<div class="p-4 background d-block text-center" style="width: 500px">
  <span class="tweet-text mb-4">
    Join us for Jen's birthday party this Saturday at Golden Gate Park. Starts at 1:30pm. Hope to see you there! 🥳
  </span>
  <div class="p-4">
  </div>
</div>

<!-- Include external CSS, JavaScript or Fonts! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
    HCTI_HTML
    css: <<-'HCTI_CSS',
.background {
  background-color: #ff7700;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc0000' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23aa0000' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d6002b' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b10022' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d9004b' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b2003d' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23d3006c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23ac0057' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c4008c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239e0071' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23880088' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
background-size: cover;
}

.tweet-text {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #EF7E31 0%, #C72B4E 100%);
  font-weight: bold;
  font-size: 32px;
  color: #F3EBF1;
  font-family: 'Yusei Magic', sans-serif;
  margin-bottom: 20px;
  padding: px;
}
    HCTI_CSS
}

uri = URI("https://hcti.io/v1/image")
http_request = Net::HTTP::Post.new(uri)
http_request.basic_auth(ENV.fetch("HCTI_API_ID"), ENV.fetch("HCTI_API_KEY"))
http_request["Content-Type"] = "application/json"
http_request.body = JSON.generate(request)

response = Net::HTTP.start(
    uri.hostname,
    uri.port,
    use_ssl: true,
    open_timeout: 10,
    read_timeout: 30
) { |http| http.request(http_request) }

unless response.is_a?(Net::HTTPSuccess)
    raise format("HCTI request failed (%s): %s", response.code, response.body)
end

result = JSON.parse(response.body)
puts result.fetch("url")

Read the Ruby Docs

From code to screenshot

How HCTI examples work

HTML/CSS to Image renders HTML and CSS in hosted Chrome, then captures the result as an image or PDF. Each example combines real source code with the API options used for the render, so it is both a working demo and a starting point for your own request.

Edit the source and options above to test changes in the browser, then render through the API to see the production result.

Common questions

Can I use the HTML and CSS from these examples?

Yes. Open an example to inspect and edit its complete HTML, CSS, and render options. Use it as a starting point, then send the resulting request from your application.

What is the difference between an example and a template?

Examples are complete API requests built from HTML and CSS. Templates are saved, reusable designs created in the visual editor and rendered repeatedly with different variable values.

Does HCTI create screenshots and PDFs?

Yes. HCTI can render HTML and CSS or capture a public webpage as an image, and it can generate PDFs when you need document output instead of a screenshot.