Content pfp
Content
@
0 reply
0 recast
0 reaction
Samuel pfp
Samuel
@samuellhuber.eth
20 USDC bounty for the fastest way to turn styled html (HTML + CSS including potential <image> tags layered etc) into an image (filetype image). reply with the fastest way, provide benchmarks why it's the fastest. No language restriction, can be any code with an open and permissive license. Provide examples proving your point that 1) the library works 2) it can be used and is blazingly fast @bountybot deadline 7 days.
13 replies
3 recasts
11 reactions
Bounty Bot pfp
Bounty Bot
@bountybot
@samuellhuber.eth updated the deadline to 11/30/2024
0 reply
0 recast
0 reaction
Bounty Bot pfp
Bounty Bot
@bountybot
Your bounty deadline just passed (2 week default unless specified). If you'd like to edit the bounty amount or deadline, please update through the bounty frame "admin" button If the bounty was completed, please update through the "admin" button
0 reply
0 recast
0 reaction
Bounty Bot pfp
Bounty Bot
@bountybot
@samuellhuber.eth updated the deadline to 10/27/2024
0 reply
0 recast
0 reaction
Bounty Bot pfp
Bounty Bot
@bountybot
Your bounty deadline just passed (2 week default unless specified). If you'd like to edit the bounty amount or deadline, please update through the bounty frame "admin" button If the bounty was completed, please update through the "admin" button
0 reply
0 recast
0 reaction
gatedude.eth pfp
gatedude.eth
@gatedude
Have you checked it out?
0 reply
0 recast
0 reaction
Daniel - Bountycaster pfp
Daniel - Bountycaster
@pirosb3
Also, just want to mention the fastest in absolute (if your page fits in your display): render the HTML and take a screenshot of your desktop 🤣
0 reply
0 recast
0 reaction
Daniel - Bountycaster pfp
Daniel - Bountycaster
@pirosb3
1) Render the HTML 2) use Chrome to export to PDF 3) use one of the many tools to convert PDF to PNG
0 reply
0 recast
0 reaction
gatedude.eth pfp
gatedude.eth
@gatedude
Hey fam, If you want to convert styled HTML (including CSS and images) to an image quickly and efficiently, you should use Puppeteer with Node.js. Puppeteer is actually a headless browser library for Node and yeah it can render HTML/CSS accurately and even save it as an image file. Here's a code Example using Puppeteer (Node.js) const puppeteer = require('puppeteer'); const fs = require('fs'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Load HTML content const htmlContent = ` <html> <head> <style> /* Your CSS here */ </style> </head> <body> <!-- Your HTML here --> </body> </html> `; await page.setContent(htmlContent); // Set viewport for full content rendering await page.setViewport({ width: 800, height: 600 }); // Save as image await page.screenshot({ path: 'output.png', fullPage: true }); await browser.close(); })();
1 reply
0 recast
0 reaction
Bounty Bot pfp
Bounty Bot
@bountybot
Confirmed! On your bounty page, you can pay users and view their bounty completion history Frame buttons - Admin: manage bounty status, amount, deadline, add boost to get more attention on your bounty 🤖 commands - @bountybot cancel - @bountybot in progress - @bountybot complete (optional: tag winners) - @bountybot shoutout (optional: tag winner and write a positive review)
0 reply
0 recast
0 reaction
Steve pfp
Steve
@stevedylandev.eth
Cheap shot, but Satori is industry standard imo. Turns html + css into SVGs (and with another library you can turn those into PNGs or other image formats). Runs server side, pretty easy to use, and can even do tailwind styling. Example: https://stevedylandev-visionaryazureswordtail.web.val.run/ https://github.com/vercel/satori With that said would be interested to see what others mention 👀
1 reply
0 recast
6 reactions
derek pfp
derek
@derek
If you're optimizing for speed, I would not introduce additional libraries like Puppeteer. The fastest way is to server-side render and run headless browser on the machine and call the browser's screenshot command directly. We use firefox because it's accelerated out of the box without additional config. You can do this with chrome as well, but requires additional flags. The performance difference is negligible. ``` firefox -headless --window-size=1910,1000 -screenshot ``` This works: we're doing this in production for scoreclips. This is a rendered HTML template (there's some overhead in the example to actually fetch the data, but the image rendering is very fast). Example: https://merlot.bunches.io/app/scoreclip/ccb6079b-5975-4b24-9108-5fc99b47e9c3 Happy to answer any additional questions! @derek
1 reply
0 recast
1 reaction
Leeward Bound pfp
Leeward Bound
@leewardbound
im experimenting with this, 40-70ms renders of full html pages (depending on remote asset loading) https://github.com/DioxusLabs/blitz
2 replies
0 recast
6 reactions
Vladyslav Dalechyn pfp
Vladyslav Dalechyn
@dalechyn.eth
It would be so cool if some kind of browser would implement it in a server side API. Maybe LadyBird has this? haven't checked myself
0 reply
0 recast
1 reaction