I want to convert html to png.
Here is my html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 600px;
margin: 100px auto;
}
header {
width: 100%;
height: auto;
background-color: red;
background-size: cover;
background-repeat: no-repeat;
}
header .content {
width: 80%;
margin-left: 10%;
margin-right: 10%;
display: flex;
padding: 40px 0;
}
.content .column {
width: 25%;
margin: auto;
text-align: center;
}
.content .column.lfp-logo {
width: 30%;
}
.content .column img {
width: 80%;
height: auto;
}
</style>
</head>
<body>
<main>
<header>
<div class="content">
<div class="column"><img
src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div>
<div class="column lfp-logo"><img
src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div>
<div class="column"><img
src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div>
</div>
</header>
</main>
</body>
</html>
Here is jsfiddle example. this is actually what i need to get in my png file jsfiddle
I tried to use wkhtmltoimage
and I get this image
Also I tried to use phantomjs
and get this image
I use phantomjs with nodejs module webshot
.
Can anyone suggest me way I can render html to png image. I dont need dynamic html. All I want to render is static.
UPDATE. Added code for generating images
const pug = require('pug');
const child_process = require('child_process');
const fs = require('fs');
const webshot = require('webshot');
const options = {
data: {
images: {
header: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg',
team1: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg',
team2: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg',
competition: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg'
}
}
};
const html = pug.renderFile('./template/next.pug', options);
console.log(html); // this is html
// webshot with wkhtmltoimage
child_process.exec(`echo "${html}" | wkhtmltoimage --width 600 --disable-smart-width - export/out.png`, (err) => {
console.log(err);
});
// webshot with phantomjs
webshot(html, 'hello_world.png', {siteType:'html'}, function(err) {
console.log(err);
});