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.
htmlstring
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>urlurl
URL to render as an image.
Example:
https://1001fx.comfullPageboolean
Specifies if the whole page should be saved in the screenshot. Defaults to false.
Example:
outputFormatstring
The desired output format
Possible values are: png, jpeg
Example:
pngwidthnumber
The desired output width.
Example:
800heightnumber
The desired output height.
Example:
600replacementsarray<object>
Key Value pairs to replace in your provided html.
Example:
[
{
"key": "{{ name }}",
"value": "Max Mustermann"
}
]keystring
Replacement key to search for in your html. Must be provided in the pattern {{KEY}}.
Example:
{{title}}valuestring
Replacement value to replace in your html.
Example:
Keynote Title