/** * This meme creation tool app will allow users to create memes by selecting an image and adding top and bottom text. * We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface MemeTemplate { id: string; name: string; url: string; } interface TextPosition { x: number; y: number; maxWidth: number; color: string; } function App() { const [templates, setTemplates] = useState([]); const [selectedTemplate, setSelectedTemplate] = useState(""); const [topText, setTopText] = useState(""); const [bottomText, setBottomText] = useState(""); const [memeUrl, setMemeUrl] = useState(""); const canvasRef = useRef(null); useEffect(() => { fetch("/templates") .then(response => response.json()) .then(data => setTemplates(data)); }, []); const getTextPositions = (imageWidth: number, imageHeight: number, templateId: string): [TextPosition, TextPosition] => { const defaultColor = "white"; switch (templateId) { case "1": // Drake return [ { x: imageWidth * 0.7, y: imageHeight * 0.25, maxWidth: imageWidth * 0.5, color: "black" }, { x: imageWidth * 0.7, y: imageHeight * 0.75, maxWidth: imageWidth * 0.5, color: "black" } ]; case "2": // Distracted Boyfriend return [ { x: imageWidth * 0.6, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor }, { x: imageWidth * 0.8, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor } ]; case "3": // Two Buttons return [ { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.8, color: defaultColor }, { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor } ]; case "4": // Expanding Brain return [ { x: imageWidth * 0.5, y: imageHeight * 0.15, maxWidth: imageWidth * 0.8, color: defaultColor }, { x: imageWidth * 0.5, y: imageHeight * 0.95, maxWidth: imageWidth * 0.8, color: defaultColor } ]; case "5": // Change My Mind return [ { x: imageWidth * 0.5, y: imageHeight * 0.7, maxWidth: imageWidth * 0.8, color: defaultColor }, { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor } ]; default: return [ { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.9, color: defaultColor }, { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.9, color: defaultColor } ]; } }; const generateMeme = () => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const selectedImage = templates.find(t => t.id === selectedTemplate); if (!selectedImage) return; const image = new Image(); image.crossOrigin = "anonymous"; image.onload = () => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); const fontSize = Math.floor(image.height / 15); ctx.font = `bold ${fontSize}px Impact, sans-serif`; ctx.textAlign = "center"; const [topPosition, bottomPosition] = getTextPositions(image.width, image.height, selectedTemplate); // Function to draw text with word wrap const drawText = (text: string, position: TextPosition) => { ctx.fillStyle = position.color; ctx.strokeStyle = "black"; ctx.lineWidth = Math.floor(fontSize / 15); const words = text.split(' '); let line = ''; const lines: string[] = []; for (let n = 0; n < words.length; n++) { const testLine = line + words[n] + ' '; const metrics = ctx.measureText(testLine); const testWidth = metrics.width; if (testWidth > position.maxWidth && n > 0) { lines.push(line); line = words[n] + ' '; } else { line = testLine; } } lines.push(line); lines.forEach((line, i) => { ctx.strokeText(line, position.x, position.y + i * fontSize); ctx.fillText(line, position.x, position.y + i * fontSize); }); }; // Top text drawText(topText.toUpperCase(), topPosition); // Bottom text drawText(bottomText.toUpperCase(), bottomPosition); setMemeUrl(canvas.toDataURL()); }; image.src = selectedImage.url; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); generateMeme(); }; return (

Meme Creator

{memeUrl && Generated Meme

}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/templates") { // This is a small set of meme templates. You can expand this list as needed. const templates = [ { id: "1", name: "Drake", url: "https://i.imgflip.com/30b1gx.jpg" }, { id: "2", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg" }, { id: "3", name: "Two Buttons", url: "https://i.imgflip.com/1g8my4.jpg" }, { id: "4", name: "Expanding Brain", url: "https://i.imgflip.com/1jwhww.jpg" }, { id: "5", name: "Change My Mind", url: "https://i.imgflip.com/24y43o.jpg" }, ]; return new Response(JSON.stringify(templates), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Meme Creator

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } h1 { text-align: center; color: #333; } form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } select, input, button { padding: 10px; font-size: 16px; } button { background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } .meme-image { max-width: 100%; display: block; margin: 20px auto; } `; export default server;

memeGenerator