How to convert a React Component to an Image

Question

I am making a generator for converting text into an image. Everything is done, but I need to convert my react-component to an image with a button click.

Just looking for tips and links to websites.

Tisiphone

try: npmjs.com/package/html-to-image – Lot

Just had this challenge yesterday, so I wrote a tutorial about it: From React Component to Image – Concentration

Answer 1

there are a lot of ways to do it.

you can use html2canvas library. Sample code - :

html2canvas(input, {
            // // dpi: 144,
            backgroundColor: "#FFFFFF",
            // allowTaint: false,
            // taintTest: false,
        })
            .then((canvas) => {
                console.log(canvas);
                canvas.style.display = 'none';
                var image = canvas.toDataURL("png")
                var a = document.createElement("a");
                a.setAttribute('download', 'myImage.png');
                a.setAttribute('href', image);
                a.click();
    }

Or you can also use Blob to save the image -:

canvas.toBlob(
blob => {
 const anchor = document.createElement('a');
                       anchor.download = `${this.state.regionName}.jpeg`; // optional, but you can give the file a name
                     anchor.href = URL.createObjectURL(blob);

                      anchor.click(); // ✨ magic!

                     URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
                    },
                     'image/jpeg',
                    0.9,
);

Writein

Answer 2

react-export-image is a library that can do this.

Example code is on their npmjs page.

Crush