html2canvas VS satori

GItHub :- https://github.com/niklasvh/html2canvas

That's slightly harder, but still possible by first rendering the HTML onto a canvas.

Example here: http://html2canvas.hertzen.com/

If you have it working in the browser you could use this.https://html2canvas.hertzen.com/

, etc. for styling. So we need to parse our DOM as canvas and then convert it into a png. There's a libary which helps us do just that. html2canvas. We modify our downloadQRCode function such that first we get snapshot of our DOM as a canvas then we convert that into a png. Final code // QRCodeTemplate.tsx import React from "react" import html2canvas from "html2canvas" import { QRCodeCanvas } from "qrcode.react" import Button from "components/Button" import QRCodeTemplate from "components/dashboard/QRCodeTemplate" const QRCodeDownload = () => { const url = "https://anshsaini.com" const getCanvas = () => { const qr = document.getElementById("fancy-qr-code") if (!qr) return return html2canvas(qr, { onclone: snapshot => { const qrElement = snapshot.getElementById("fancy-qr-code") if (!qrElement) return // Make element visible for cloning qrElement.style.display = "block" }, }) } const downloadQRCode = async () => { const canvas = await getCanvas() if (!canvas) throw new Error(" not found in DOM") const pngUrl = canvas .toDataURL("image/png") .replace("image/png", "image/octet-stream") const downloadLink = document.createElement("a") downloadLink.href = pngUrl downloadLink.download = "QR code.png" document.body.appendChild(downloadLink) downloadLink.click() document.body.removeChild(downloadLink) } return (

QRCodeTemplate>

Download QR CodeButton> div> div> ) } export default QRCodeDownload Enter fullscreen mode Exit fullscreen mode The Result We have a beautiful QR code saved as a png. And with the power of React, we can create as many styles as we want.

Hey guys, I using html2canvas in our project and I am facing this issue.

use http://html2canvas.hertzen.com/ to convert the div to an image if you want

This looks super useful! I’ve previously used [html2canvas](https://html2canvas.hertzen.com/) to make a simple tool for generating graphics for a news org, but I can see myself using this going forward.

View on GitHub

I've used satori [0] on the backend with TypeScript/Deno to render JSX as an SVG (which is then rendered to a PNG).

Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. It supports a subset of modern CSS, including flexbox.

My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats.

It's quite nice because there are almost zero server-side native dependencies (the one exception is the library to convert svg -> png requires some native libraries).

Here's what a match report looks like: [1]

Here's an example of what the JSX looks like: [2]

[0]: https://github.com/vercel/satori

[1]: https://github.com/shepherdjerred/glitter/blob/main/assets/p...

[2]: https://github.com/shepherdjerred/glitter/blob/main/packages...

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.

This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]

[0]: https://github.com/vercel/satori

[1]: https://github.com/shepherdjerred/glitter-boys

Install the @vercel/og package. This library is designed to convert React code into PNG images. It is built on Satori, a library that converts HTML and CSS into SVGs.

Examples are available in the Vercel OG Playground.

In this version, we no longer use Puppeteer to capture HTML and return images. Instead, we utilize the @vercel/og library, which employs Satori as its core engine. Satori is a library that converts HTML and CSS into SVG.

This is made possible thanks to the Dynamic Open Graph Image Generation feature introduced with Next.js version 13.3, and the new Metadata API. In summary, it involves generating images using code (in our case, TSX, HTML, and CSS) with the help of the libraries @vercel/og (already integrated in the App router) and Satori. Satori converts HTML and CSS to SVG, and then resvg-js converts the SVG to a PNG image. All of this in just a few milliseconds!

Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time. Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image. For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.

Use Vue files to generate SVG images by Satori. The image can be generated by running ESM script or CLI.

I'm not familiar with it but looks like it's made with nodejs, node uses the same js engine used by chrome, node renders the template and converts it to plain html/css and then they use this library to convert it to png but in the library github page it says that they don't support everything so it's kinda similar to xhtml2pdf or weasyprint