如何在ReactJS中为模因生成器制作下载功能

Question

内存生成器应用程序图像

我已经构建了一个表情包生成器应用程序，它基本上有一个图像和顶部文本，底部文本。用户可以更改顶部文本、底部文本，也可以更改图像。

我如何添加下载功能，以便用户可以下载带有文本的表情包图像

我的应用程序是用ReactJS编写的，所以请告诉我React友好的方式。

Answer 1

在这种情况下，您应该将div内容捕获为图像。使用html2canvas

import html2canvas from "html2canvas";
const exportAsImage = async (el, imageFileName) => {
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png", 1.0);
downloadImage(image, imageFileName);
};
const downloadImage = (blob, fileName) => {
const fakeLink = window.document.createElement("a");
fakeLink.style = "display:none;";
fakeLink.download = fileName;
fakeLink.href = blob;
document.body.appendChild(fakeLink);
fakeLink.click();
document.body.removeChild(fakeLink);
fakeLink.remove();
};
export default exportAsImage;



export default function App() {
const exportRef = useRef();
return (
<>
<div className="parent">
<div ref={exportRef}>
<p>title top</p>
<img src="meme.png"></img>
</div>
</div>
<button onClick={() => exportAsImage(exportRef.current, "test")}>
Capture Image
</button>
</>
)
}

参考https://blog.logrocket.com/export-react-components-as-images-html2canvas/