9 - Meme Generator with Custom Text

Description

Develop a web application that allows users to generate memes by:

• Selecting a background image from a collection of meme templates.

• Adding custom text to the top and bottom sections of the meme.

• Customizing font, color, and text alignment.

• Downloading the generated meme as an image file.

Algorithm

1. Image and Font Data:

   • Store a collection of meme background images.

   • Provide a list of available fonts for text customization.

2. Component Structure:

   • Image Selection:

     • Display a grid of meme templates.

     • Allow users to select an image.

   • Text Input:

     • Provide input fields for top and bottom text.

     • Allow font, color, and alignment selection.

   • Meme Preview:

     • Render the selected image with overlaid text.

     • Update the preview dynamically as users make changes.

   • Download Button:

     • Download the generated meme as an image file.

Code

import React, { useState, useRef } from 'react';

function MemeGenerator() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [topText, setTopText] = useState('');
  const [bottomText, setBottomText] = useState('');
  const [font, setFont] = useState('Arial');
  const [color, setColor] = useState('black');
  const [textAlign, setTextAlign] = useState('center');
  const canvasRef = useRef(null);

  const handleImageSelect = (imageUrl) => {
    setSelectedImage(imageUrl);
  };

  const handleTextInput = (type, text) => {
    switch (type) {
      case 'top':
        setTopText(text);
        break;
      case 'bottom':
        setBottomText(text);
        break;
    }
  };

  const handleFontChange = (newFont) => {
    setFont(newFont);
  };

  const handleColorChange = (newColor) => {
    setColor(newColor);
  };

  const handleTextAlignChange = (newAlign) => {
    setTextAlign(newAlign);
  };

  const downloadMeme = () => {
    const canvas = canvasRef.current;
    const link = document.createElement('a');
    link.download = 'meme.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  };

  const renderText = () => {
    if (!selectedImage) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    const image = new Image();
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);

      ctx.font = `${font} 30px`;
      ctx.fillStyle = color;
      ctx.textAlign = textAlign;

      const textWidth = ctx.measureText(topText).width;
      const textHeight = 40; // Adjust based on font size

      ctx.fillText(topText, (canvas.width - textWidth) / 2, textHeight);
      ctx.fillText(bottomText, (canvas.width - textWidth) / 2, canvas.height - textHeight);
    };
    image.src = selectedImage;
  };

  useEffect(() => {
    renderText();
  }, [selectedImage, topText, bottomText, font, color, textAlign]);

  return (
    <div className="meme-generator">
      {/* Image selection section */}
      <div className="meme-templates">
        {/* Display meme templates here */}
      </div>

      {/* Text input section */}
      <div className="text-inputs">
        <input
          type="text"
          placeholder="Top text"
          value={topText}
          onChange={(e) => handleTextInput('top', e.target.value)}
        />
        <input
          type="text"
          placeholder="Bottom text"
          value={bottomText}
          onChange={(e) => handleTextInput('bottom', e.target.value)}
        />
        {/* Font, color, and alignment controls */}
      </div>

      <div className="meme-preview">
        <canvas ref={canvasRef} />
      </div>

      <button onClick={downloadMeme}>Download Meme</button>
    </div>
  );
}

export default MemeGenerator;

Additional Notes

• Consider using a canvas element for finer control over image and text rendering.

• Explore libraries like react-canvas or konva for canvas-based meme generation.

• Implement features like image cropping or resizing for more flexibility.

• Provide options to share generated memes directly on social media.