/** * This app allows users to drop an image onto the canvas, add text to it, move the text around, * edit the text directly on the canvas, and save the result to their local disk. * We'll use the HTML5 Canvas API for image manipulation and the File System Access API for saving files. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [image, setImage] = useState(null); const [text, setText] = useState("Enter text here"); const [textPosition, setTextPosition] = useState({ x: 250, y: 250 }); const [isDragging, setIsDragging] = useState(false); const [canvasSize, setCanvasSize] = useState({ width: window.innerWidth, height: window.innerHeight }); const [textColor, setTextColor] = useState("#ffffff"); const [fontSize, setFontSize] = useState(30); const [fontFamily, setFontFamily] = useState("Caveat"); const canvasRef = useRef(null); useEffect(() => { drawCanvas(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [image, text, textPosition, canvasSize, textColor, fontSize, fontFamily]); const handleResize = () => { if (!image) { setCanvasSize({ width: window.innerWidth, height: window.innerHeight }); } }; const drawCanvas = () => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); if (image) { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); } else { ctx.fillStyle = "#f0f0f0"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "20px Caveat"; ctx.textAlign = "center"; ctx.fillText("Drop an image here", canvas.width / 2, canvas.height / 2); } ctx.font = `${fontSize}px ${fontFamily}`; ctx.fillStyle = textColor; ctx.textAlign = "center"; ctx.fillText(text, textPosition.x, textPosition.y); }; const handleCanvasMouseDown = (e) => { const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const textWidth = canvasRef.current.getContext("2d").measureText(text).width; if (Math.abs(x - textPosition.x) < textWidth / 2 && Math.abs(y - textPosition.y) < fontSize / 2) { setIsDragging(true); } else { setTextPosition({ x, y }); } }; const handleCanvasMouseMove = (e) => { if (isDragging) { const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setTextPosition({ x, y }); } }; const handleCanvasMouseUp = () => { setIsDragging(false); }; const handleKeyPress = (e) => { e.preventDefault(); if (e.key === 'Backspace') { setText(text.slice(0, -1)); } else if (e.key.length === 1) { setText(text + e.key); } }; const handleDrop = (e) => { e.preventDefault(); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { setImage(img); const aspectRatio = img.width / img.height; let newWidth = Math.min(window.innerWidth, img.width); let newHeight = newWidth / aspectRatio; if (newHeight > window.innerHeight) { newHeight = window.innerHeight; newWidth = newHeight * aspectRatio; } setCanvasSize({ width: newWidth, height: newHeight }); setTextPosition({ x: newWidth / 2, y: newHeight / 2 }); }; img.src = event.target.result; }; reader.readAsDataURL(file); } }; const handleDragOver = (e) => { e.preventDefault(); }; const handleSave = async () => { try { const blob = await new Promise(resolve => canvasRef.current.toBlob(resolve, 'image/png')); const handle = await window.showSaveFilePicker({ suggestedName: 'image-with-text.png', types: [{ description: 'PNG Files', accept: {'image/png': ['.png']}, }], }); const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); alert('Image saved successfully!'); } catch (err) { console.error('Error saving the image:', err); alert('Failed to save the image. Please try again.'); } }; return (

CZARKOWY EDYTOR DAT NA OBRAZKACH

setTextColor(e.target.value)} /> setFontSize(Number(e.target.value))} min="1" max="100" /> View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` CZARKOWY EDYTOR DAT NA OBRAZKACH

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: 'Caveat', cursive; margin: 0; padding: 0; height: 100vh; } h1 { text-align: center; font-size: 2.5em; } button { font-family: 'Caveat', cursive; padding: 10px 20px; font-size: 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px #357a38; } button:hover { background-color: #45a049; } button:active { background-color: #45a049; box-shadow: 0 2px #357a38; transform: translateY(3px); } button:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; box-shadow: none; } canvas { box-shadow: 0 0 10px rgba(0,0,0,0.1); } a { font-family: 'Caveat', cursive; font-size: 18px; color: #4CAF50; text-decoration: none; } a:hover { text-decoration: underline; } input, select { font-family: 'Caveat', cursive; font-size: 16px; padding: 5px; } `; export default server;

czarkowyEdytorDat

Versions

v0