I have built meme generator app that basically have an image and top text, bottom text over it. User can change top text, bottom text and also change the image.
How can I add the download functionality so that user can download meme image with text over it?
My app is written in ReactJS so please tell me the React friendly way.
in this case, you shoud capture a div content as image. using 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>
</>
)
}
ref https://blog.logrocket.com/export-react-components-as-images-html2canvas/