How to make download functionality for meme generator in ReactJS?

Question

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.

This question reads like a request to write code - that's not what stack overflow is — Jaromanda X, Sep 18 '22 at 07:25
@JaromandaX I am not requesting to write code. I only want to know the name of methods that can fulfil my task. — Sagar Sharma, Sep 18 '22 at 08:09

score 0 · Answer 1 · answered Sep 18 '22 at 07:22

0

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/

answered Sep 18 '22 at 07:22

Yui-Yukino

26
1
3

It is very much helpful, but I am only getting the text not the meme image in downloaded Png file. Any solution for this ? – Sagar Sharma Sep 18 '22 at 09:46
Does html2canvas supports images URL came from Api because I am using this? – Sagar Sharma Sep 18 '22 at 10:06
Yes, html2canvas capture div content, so if div contains image, some text,... will export picture as you see. If you need more support. Give me your code, i wil help you – Yui-Yukino Sep 18 '22 at 20:11
https://stackoverflow.com/questions/73762524/reactjs-elements-not-converting-to-canvas-properly-using-html2canvas – Sagar Sharma Sep 19 '22 at 16:08
I have added another question with all the code regarding same issue so please help me out. – Sagar Sharma Sep 19 '22 at 16:09

How to make download functionality for meme generator in ReactJS?

1 Answers1