A simple Meme generator using React

Demo

Live demo here.

Features

• Download meme
• Share meme
• Move text
• Resize text
• Colour text

Library and API used

• API sauce: An HTTP client library
• Styles Component
• react-lazy-load-image-component : To lazy load images in slider
• Image flip meme API: For fetching raw meme images
• Tempfiler API: To upload generated meme to get share link

NOTE : On download only meme is not uploaded to server. Only for sharing meme is upload which is also delete from server after sometime.

Working

Image and texts is drawn on a SVG and then SVG is exported as image/png by chaining it to blob object using canvas.

On share image is uploaded to server and image link is shared using Web share API.

Known Issues

• Color picker lag on changing frequently. Throttling can be used to fixed this issue.

References

• Drag’n’Drop algorithm
• Drawing DOM objects into a canvas