Render HTML to an image
There is a lot of options and they all have their pro and cons.
Option 1: Use an API
- ApiFlash (based on chrome)
- EvoPDF (has an option for html)
- Grabzit
- HTML/CSS to Image API
- ...
Pros
- Execute Javascript
- Near perfect rendering
- Fast when caching options are correctly used
- Scale is handled by the APIs
- Precise timing, viewport, ...
- Most of the time they offer a free plan
Cons
- Not free if you plan to use them a lot
Option 2: Use one of the many available libraries
- dom-to-image
- wkhtmltoimage (included in the wkhtmltopdf tool)
- IMGKit (for ruby and based on wkhtmltoimage)
- imgkit (for python and based on wkhtmltoimage)
- python-webkit2png
- ...
Pros
- Conversion is quite fast most of the time
Cons
- Bad rendering
- Does not execute javascript
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Sometimes not so easy to install
- Complicated to scale
Option 3: Use PhantomJs and maybe a wrapper library
- PhantomJs
- node-webshot (javascript wrapper library for PhantomJs)
- ...
Pros
- Execute Javascript
- Quite fast
Cons
- Bad rendering
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Complicated to scale
- Not so easy to make it work if there is images to be loaded ...
Option 4: Use Chrome Headless and maybe a wrapper library
- Chrome Headless
- chrome-devtools-protocol
- Puppeteer (javascript wrapper library for Chrome headless)
- ...
Pros
- Execute Javascript
- Near perfect rendering
Cons
- Not so easy to have exactly the wanted result regarding:
- page load timing
- viewport dimensions
- Complicated to scale
- Quite slow and even slower if the html contains external links
Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.
HTML to IMAGE using Python
You can do this by using imgkit
import imgkit
imgkit.from_file('test.html', 'out.jpg')
Or you can also use htmlcsstoimage Api
# pip3 install requests
import requests
HCTI_API_ENDPOINT = "https://hcti.io/v1/image"
HCTI_API_USER_ID = 'your-user-id'
HCTI_API_KEY = 'your-api-key'
data = { 'html': "<div class='box'>Hello, world!</div>",
'css': ".box { color: white; background-color: #0f79b9; padding: 10px; font-family: Roboto }",
'google_fonts': "Roboto" }
image = requests.post(url = HCTI_API_ENDPOINT, data = data, auth=(HCTI_API_USER_ID, HCTI_API_KEY))
print("Your image URL is: %s"%image.json()['url'])
# https://hcti.io/v1/image/7ed741b8-f012-431e-8282-7eedb9910b32
How can I render Images with JavaScript into my HTML
The problem is that you use an equal sign (=
) rather than a plus-equal sign (+=
). The plus-equal sign will add the text to the variable, while the equal sign will overwrite the variable.
This line:
getImgs = `<img scr="${imgs[i]}">`
getImgs
is being set to the string, the string is not being added to it. You need to change it to something like this:
getImgs += `<img scr="${imgs[i]}">`
(Notice the plus before the equal sign)
This way, the variable will not be completely changed, rather it will be appended to.
Full code:
const imgs = [
"images/p1.jpg",
"images/p2.jpg",
"images/p3.jpg"
]
const container = document.getElementById("container")
function renderImages() {
let getImgs = ""
for (let i = 0; i < imgs.length; i++) {
getImgs += `<img scr="${imgs[i]}">`
}
container.innerHTML = getImgs
}
renderImages()
/* I added css so you can see the images */
img {
border: 1px solid black;
width: 20px;
height: 20px;
background: linear-gradient(90deg, blue, green);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Headline</h1>
<div id="container">
</div>
</body>
</html>
how to render html code to transparent background image with python
this works pretty nicely:
import imgkit
kitoptions = {
"transparent": "",
}
imgkit.from_file('test.html', 'out.png', options=kitoptions)
Render HTML to an image
There is a lot of options and they all have their pro and cons.
Option 1: Use an API
- ApiFlash (based on chrome)
- EvoPDF (has an option for html)
- Grabzit
- HTML/CSS to Image API
- ...
Pros
- Execute Javascript
- Near perfect rendering
- Fast when caching options are correctly used
- Scale is handled by the APIs
- Precise timing, viewport, ...
- Most of the time they offer a free plan
Cons
- Not free if you plan to use them a lot
Option 2: Use one of the many available libraries
- dom-to-image
- wkhtmltoimage (included in the wkhtmltopdf tool)
- IMGKit (for ruby and based on wkhtmltoimage)
- imgkit (for python and based on wkhtmltoimage)
- python-webkit2png
- ...
Pros
- Conversion is quite fast most of the time
Cons
- Bad rendering
- Does not execute javascript
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Sometimes not so easy to install
- Complicated to scale
Option 3: Use PhantomJs and maybe a wrapper library
- PhantomJs
- node-webshot (javascript wrapper library for PhantomJs)
- ...
Pros
- Execute Javascript
- Quite fast
Cons
- Bad rendering
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Complicated to scale
- Not so easy to make it work if there is images to be loaded ...
Option 4: Use Chrome Headless and maybe a wrapper library
- Chrome Headless
- chrome-devtools-protocol
- Puppeteer (javascript wrapper library for Chrome headless)
- ...
Pros
- Execute Javascript
- Near perfect rendering
Cons
- Not so easy to have exactly the wanted result regarding:
- page load timing
- viewport dimensions
- Complicated to scale
- Quite slow and even slower if the html contains external links
Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.
Related Topics
Capture Key Press (Or Keydown) Event on Div Element
How to Make a Browser to Browser (Peer to Peer) Connection
Video Auto Play Is Not Working in Safari and Chrome Desktop Browser
Change :Hover CSS Properties With JavaScript
Method to Show Native Datepicker in Chrome
Calling Webpacked Code from Outside (Html Script Tag)
How to Apply !Important Using .Css()
How to Detect Keypresses in JavaScript
How to Get the Element Clicked (For the Whole Document)
Get the Position of a Div/Span Tag
Adjust Width of Input Field to Its Input
Find the Closest Ancestor Element That Has a Specific Class
How to Make HTML Element Resizable Using Pure JavaScript
How to Set the Form Action Through JavaScript
Prevent Page Load on Jquery Form Submit With None Display Button