3 ms·

Huh, `@vercel/og` is interesting! It looks like the same approach as `html2canvas` (implement custom rendering for each HTML element + CSS property), with all t

Huh, `@vercel/og` is interesting! It looks like the same approach as `html2canvas` (implement custom rendering for each HTML element + CSS property), with all the tradeoffs that entails, but they actually rightly limited some of the features they're willing to support (like external stylesheets). And it looks like it'll be more supported than `html2canvas` currently is. I quite like `dom-to-image-more` (sorta active fork of `dom-to-image`) that renders a SVG with a foreignElement that is a data URL of an XHTML page to a canvas. It also led me to rewriting my own image rendering stuff to just build an SVG in DOM, use toDataURL on it, and then render that in a canvas. So much simpler

notpushkin 4y ago
SVG is a really underrated medium. The only thing I miss compared to HTML is flexboxes (but there's always stuff like react-flexbox-svg [1]). [1]: https://github.com/metabolize/react-flexbox-svg https://github.com/metabolize/react-flexbox-svg Edit: for a React-less implementation, see https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.ht...
- benatkin 4y ago
  With WebAssembly, layout engines should be easy pickings. Just have to grab the code from an open source browser and get it to build, and put the license on it. Edit: well, not that easy :) https://github.com/servo/servo/discussions/28070 https://github.com/servo/servo/discussions/28070
scastiel 4y ago
html2canvas and similar libraries only work in the browser, and this is why @vercel/og is that interesting! Not only it runs on the server (in an Edge serverless function), but it doesn’t have to start a headless browser to make screenshot and generate the image ;)
- cobertos 4y ago
  How could I forgot about that part! Yeah, super useful for that platform. I had so much trouble finding the GitHub repo for it to check their methodology earlier I forgot about that lol

notpushkin 4y ago

SVG is a really underrated medium. The only thing I miss compared to HTML is flexboxes (but there's always stuff like react-flexbox-svg [1]). [1]: https://github.com/metabolize/react-flexbox-svg https://github.com/metabolize/react-flexbox-svg Edit: for a React-less implementation, see https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.ht...

benatkin 4y ago
With WebAssembly, layout engines should be easy pickings. Just have to grab the code from an open source browser and get it to build, and put the license on it. Edit: well, not that easy :) https://github.com/servo/servo/discussions/28070 https://github.com/servo/servo/discussions/28070

scastiel 4y ago

html2canvas and similar libraries only work in the browser, and this is why @vercel/og is that interesting! Not only it runs on the server (in an Edge serverless function), but it doesn’t have to start a headless browser to make screenshot and generate the image ;)

cobertos 4y ago
How could I forgot about that part! Yeah, super useful for that platform. I had so much trouble finding the GitHub repo for it to check their methodology earlier I forgot about that lol