html2image - Convert HTML String or URL to an Image
Converts an HTML string or URL to an image. If an HTML string is given. Replacements for the text are processed. It is also possible to use Tailwind in classes.
html
string
HTML to render as an image. You can use tailwind classes provided in a tw tag in your elements. The following font families are supported: Alegreya, Barlow, Inter, Lato, Montserrat, OpenSans, Oswald, Poppins, PTSans, Raleway, Roboto
Example:
<div class='flex flex-1 bg-gray-300 rounded-md'><div class='flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8'><h2 class='flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left'><span>Hello {{ name }}</span><span class='text-indigo-600'>Welcome to 1001fx</span></h2><div class='mt-8 flex md:mt-0'><div class='flex rounded-md '><div class='flex items-center justify-center rounded-md border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white'>Get started</div></div><div class='ml-3 flex rounded-md '><div class='flex items-center justify-center rounded-md border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600'>Learn more</div></div></div></div></div>
url
url
URL to render as an image.
Example:
https://1001fx.com
fullPage
boolean
Specifies if the whole page should be saved in the screenshot. Defaults to false.
Example:
outputFormat
string
The desired output format
Possible values are: png, jpeg
Example:
png
width
number
The desired output width.
Example:
800
height
number
The desired output height.
Example:
600
replacements
array<object>
Key Value pairs to replace in your provided html.
Example:
[
{
"key": "{{ name }}",
"value": "Max Mustermann"
}
]
key
string
Replacement key to search for in your html. Must be provided in the pattern {{KEY}}.
Example:
{{title}}
value
string
Replacement value to replace in your html.
Example:
Keynote Title