9 - Meme Generator with Custom Text

Description

Create a React application that generates memes with custom text.

Algorithm

1. Initialize state variables to store the meme image, top text, and bottom text.

2. Render a form to input custom text and select a meme image.

3. Define a function to generate the meme with the custom text.

4. Render the generated meme.

Classes

MemeGenerator: A React component that manages the meme state and generates the meme.

Code

import React, { useState } from 'react';

function MemeGenerator() {
  const [image, setImage] = useState('');
  const [topText, setTopText] = useState('');
  const [bottomText, setBottomText] = useState('');
  const [meme, setMeme] = useState('');

  const handleGenerateMeme = () => {
    const memeImage = new Image();
    memeImage.src = image;
    const canvas = document.createElement('canvas');
    canvas.width = memeImage.width;
    canvas.height = memeImage.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(memeImage, 0, 0);
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '30px Impact';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(topText, canvas.width / 2, canvas.height / 2 - 50);
    ctx.fillText(bottomText, canvas.width / 2, canvas.height / 2 + 50);
    setMeme(canvas.toDataURL());
  };

  return (
    <div>
      <form>
        <input value={image} onChange={(e) => setImage(e.target.value)} />
        <input value={topText} onChange={(e) => setTopText(e.target.value)} />
        <input value={bottomText} onChange={(e) => setBottomText(e.target.value)} />
        <button onClick={handleGenerateMeme}>Generate Meme</button>
      </form>
      <img src={meme} alt="Generated Meme" />
    </div>
  );
}

export default MemeGenerator;

Explanation

The code defines a MemeGenerator component that utilizes the useState hook to initialize state variables for the meme image, top text, bottom text, and generated meme. The handleGenerateMeme function generates the meme by drawing the image and text on a canvas element. The component renders a form to input custom text and select a meme image, and a button to generate the meme. The generated meme is then rendered as an image.

Possible Future Enhancements

• Add more meme image options.

• Implement a preview mode to display the generated meme in a separate container.

• Use a library like Konva to generate more complex memes.

• Integrate with a social media app to share generated memes.