htmlをpngに変換したいです。
これが私の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>
これがjsfiddleの例です。これは実際に私のpngファイルjsfiddleで取得する必要があるものです
私は使用しようとしましたがwkhtmltoimage、この画像が表示されます
また
、nodejsモジュールでphantomjsを使用するphantomjsこの画像を使用して取得
しようとしました。
webshot
HTMLをpng画像にレンダリングする方法を誰かに提案してもらえますか。動的htmlは必要ありません。レンダリングしたいのは静的です。
アップデート。画像を生成するためのコードを追加
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);
});