如何将 React 组件转换为图像

Question

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

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

Answer 1

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

\n

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

\n

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

\n

或者你也可以使用 Blob 来保存图像 -：

\n

canvas.toBlob(\nblob => {\n const anchor = document.createElement('a');\n                       anchor.download = `${this.state.regionName}.jpeg`; // optional, but you can give the file a name\n                     anchor.href = URL.createObjectURL(blob);\n\n                      anchor.click(); // \xe2\x9c\xa8 magic!\n\n                     URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! \n                    },\n                     'image/jpeg',\n                    0.9,\n);\n

\n