/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // List of web-safe and popular fonts, now including monospace const FONT_FAMILIES = [ 'Arial', 'Helvetica', 'Times New Roman', 'Courier New', 'Verdana', 'Georgia', 'Palatino', 'Garamond', 'Bookman', 'Comic Sans MS', 'Trebuchet MS', 'Arial Black', 'Impact', 'Courier', 'Lucida Console', 'Monaco', 'Monospace' ]; // Gradient types const GRADIENT_TYPES = [ 'linear', 'radial' ]; interface TextNode { id: string; text: string; x: number; y: number; fontSize: number; fontFamily: string; color: string; } interface BackgroundConfig { type: 'solid' | 'gradient'; color1: string; color2?: string; gradientType?: 'linear' | 'radial'; angle?: number; } function App() { const [backgroundImage, setBackgroundImage] = useState(null); const [backgroundConfig, setBackgroundConfig] = useState({ type: 'gradient', color1: 'hsl(240, 23%, 10%)', color2: 'hsl(240, 26%, 13%)', gradientType: 'linear', angle: 90 }); const [textNodes, setTextNodes] = useState([]); const [draggedNode, setDraggedNode] = useState(null); const [selectionOffset, setSelectionOffset] = useState<{ x: number, y: number } | null>(null); const canvasRef = useRef(null); const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { setBackgroundImage(event.target?.result as string); }; reader.readAsDataURL(file); } }; const addTextNode = () => { const newNode: TextNode = { id: `text-${Date.now()}`, text: "New Text", x: 600, y: 315, fontSize: 72, fontFamily: 'Arial', color: 'hsl(8, 37%, 88%)' }; setTextNodes([...textNodes, newNode]); }; const updateTextNode = (id: string, updates: Partial) => { setTextNodes(textNodes.map(node => node.id === id ? { ...node, ...updates } : node )); }; const centerTextHorizontally = (id: string) => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; setTextNodes(textNodes.map(node => { if (node.id === id) { // Set font to match the node's configuration ctx.font = `${node.fontSize}px ${node.fontFamily}`; // Measure the text width const textMetrics = ctx.measureText(node.text); // Calculate the x-coordinate to center the text // Subtract half the text width from the canvas center const centeredX = (canvas.width / 2) - (textMetrics.width / 2); return { ...node, x: centeredX }; } return node; })); }; const centerTextVertically = (id: string) => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; setTextNodes(textNodes.map(node => node.id === id ? { ...node, y: canvas.height / 2 } : node )); }; const removeTextNode = (id: string) => { setTextNodes(textNodes.filter(node => node.id !== id)); }; const startDrag = (id: string, e: React.MouseEvent) => { setDraggedNode(id); const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const mouseX = (e.clientX - rect.left) * scaleX; const mouseY = (e.clientY - rect.top) * scaleY; const node = textNodes.find(n => n.id === id); if (node) { setSelectionOffset({ x: mouseX - node.x, y: mouseY - node.y }); } }; const endDrag = () => { setDraggedNode(null); }; const handleMouseMove = (e: React.MouseEvent) => { if (!draggedNode) return; const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (e.clientX - rect.left) * scaleX; const y = (e.clientY - rect.top) * scaleY; const offsetX = selectionOffset ? selectionOffset.x : 0; const offsetY = selectionOffset ? selectionOffset.y : 0; setTextNodes(textNodes.map(node => node.id === draggedNode ? { ...node, x: x - offsetX, y: y - offsetY } : node )); }; const createGradient = (ctx: CanvasRenderingContext2D) => { const { type, color1, color2, gradientType, angle } = backgroundConfig; if (type === 'solid') { ctx.fillStyle = color1; ctx.fillRect(0, 0, 1200, 630); return; } if (!color2) return; if (gradientType === 'linear') { const gradient = ctx.createLinearGradient( angle === 90 ? 0 : 1200, angle === 90 ? 630 : 0, angle === 90 ? 1200 : 0, angle === 90 ? 0 : 630 ); gradient.addColorStop(0, color1); gradient.addColorStop(1, color2); ctx.fillStyle = gradient; } else { const gradient = ctx.createRadialGradient(600, 315, 10, 600, 315, 800); gradient.addColorStop(0, color1); gradient.addColorStop(1, color2); ctx.fillStyle = gradient; } ctx.fillRect(0, 0, 1200, 630); }; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; // Clear and create background createGradient(ctx); // Draw background image if uploaded if (backgroundImage) { const img = new Image(); img.onload = () => { // Scale and center image const scale = Math.max(1200 / img.width, 630 / img.height); const width = img.width * scale; const height = img.height * scale; const x = (1200 - width) / 2; const y = (630 - height) / 2; ctx.drawImage(img, x, y, width, height); // Draw text nodes textNodes.forEach(node => { ctx.fillStyle = node.color; ctx.font = `${node.fontSize}px ${node.fontFamily}`; ctx.textAlign = 'left'; ctx.fillText(node.text, node.x, node.y); }); }; img.src = backgroundImage; } else { // Draw text nodes without background image textNodes.forEach(node => { ctx.fillStyle = node.color; ctx.font = `${node.fontSize}px ${node.fontFamily}`; ctx.textAlign = 'left'; ctx.fillText(node.text, node.x, node.y); }); } }, [backgroundImage, backgroundConfig, textNodes]); const downloadImage = () => { const canvas = canvasRef.current; if (!canvas) return; const link = document.createElement('a'); link.download = 'opengraph-image.png'; link.href = canvas.toDataURL('image/png'); link.click(); }; return (

OpenGraph Image Generator

{backgroundConfig.type === 'solid' && ( setBackgroundConfig({ ...backgroundConfig, color1: e.target.value })} /> )} {backgroundConfig.type === 'gradient' && ( <> setBackgroundConfig({ ...backgroundConfig, color1: e.target.value })} /> setBackgroundConfig({ ...backgroundConfig, color2: e.target.value })} /> {backgroundConfig.gradientType === 'linear' && ( )} )}

{textNodes.map((node) => (

updateTextNode(node.id, { text: e.target.value })} /> updateTextNode(node.id, { color: e.target.value })} /> updateTextNode(node.id, { fontSize: Number(e.target.value) })} min="12" max="200" />

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` OpenGraph Image Generator

`, { headers: { "content-type": "text/html" } }); }

opengraphImageCreator