React我想要将react组件转换为JPG或PNG

Question

我正在制作一个生成器，用于将文本转换为图像。一切都完成了，但我需要通过单击按钮将react-component转换为图像。

只是寻找网站的提示和链接。

Answer 1

有很多方法可以做到这一点。

您可以使用html2canvas库。示例代码--

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();
    }

或者，您也可以使用Blob保存图像-：

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,
);