Basics

chrome-image recipe is able to convert html to image. It works just like the chrome-pdf recipe only some options are different.

Options

The settings reflect the headless chrome API where you can also find detail information.

• type
• quality
• fullPage
• clipX
• clipY
• clipWidth
• clipHeight
• omitBackground
• mediaType
• viewportWidth
• viewportHeight
• waitForJS
• waitForNetworkIdle

These basic settings are typically stored with the template, but you can also send them through API calls inside the template.chromeImage property.

The options can be also dynamically set from within the page javascript using:

<script>
    ...
    window.JSREPORT_CHROME_IMAGE_OPTIONS = {
        type:  'jpeg'
    }
</script>

you can customize how the chrome page render the content by using viewportWidth and viewportHeight, this will have an impact in how the html layout is rendered, which will cause the image to look different depending if you use bigger or smaller viewport.

chrome-pdf

The chrome-image recipe is part of the same extension as chrome-pdf and it shares its configuration. This means you can increase the timeout and other options the same way.

"extensions": {
  "chrome-pdf": {
    "timeout": 30000,
    "launchOptions": {...}
  }
}

Not only the configuration but also many aspects are the same. You can for example configure printing triggers, embed fonts, reuse chrome instances or even troubleshoot it the same way. Refer to chrome-pdf for details.