As developers, we don't have great skills with image manipulation softwares, but we still need it. In my case I had to generate Twitter cards for s...
For further actions, you may consider blocking this person and/or reporting abuse
Percentage are relative to your parent dimensions So it will be 20 percent of body. If you don't fix body size it will be relative to the browser's viewport I guess. I don't set any viewport. So I recommend fixing body size to the resolution you want for the output file.
In the example below I fix the size to A4 format in high resolution. The output file resolution will be 2480x3508. So the card size will be 20% of 2480px. You see what I mean?
Thank you DesirΓ©!
Basically the module takes a screenshot of the body tag's content. So you need to fix the size of you image on this tag using CSS then you can use percent on body's children.
Maybe I should add this in the documentation?
Super cool stuff
Is there any way to use custom font? I got a HTML like this but the output image is not using the font specified (it's good to show in browser)
<br>
body {<br>
width: 1000px;<br>
height: 500px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> @font-face {
font-family: JuneBug;
src: url('JUNEBUG.TTF');
}
</style>
</code></pre></div>
<p></head></p>
<p><body>Hello world!<br>
<h1>Hey, June</h1><br>
</body></p>
<p></html></p>
Hi Nathaniel,
TTF format is made for Safari, Android and iOS. The image is generated in a chromium browser. So you can only use WOFF format.
This won't work on Docker, need to install anything other that npm install?
You have to follow this for Docker github.com/puppeteer/puppeteer/blo... (tehere is specifict instructiosn for alpine also) and send this in puppeteerArgs when you call nodeHtmlToImage:
puppeteerArgs: {
headless: true,
args: [
"--no-sandbox",
"--remote-debugging-address=0.0.0.0",
"--remote-debugging-port=9222",
],
}
ΒΏAnyone?
Is it possible to generate a GIF from animated HTML?
node-html-to-images
don't handle this use case. It is an awesome idea!Nice work. π
Thank you Daniel β€οΈ
Looks so cool! It's interesting that I can use HTML and CSS to generate an image.
Thank you Nihar! Sure, as a developper I'm used to HTML and CSS which are great tools to make nice graphical stuff π
DΓ©sirΓ© I added a section about this in the documentation. What do you think of it?
Awesomeness! π
Glad you like it β₯οΈ
Thatβs really great ! I used to make it via screenshot inside headless browsers. This solution is much more elegant
Wow, Thank you for this great work!
I have a question though, Does it work with react Native? Thank you.
This Package output only 800X600 dimension, but expecting dimension is greater then this.