[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68081d513e60819184b0a1fcacaae2dc","versionInt","title","Copia de Prototipo App Imagenes","type","code/react","content","import { useState, useRef, useEffect } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { motion } from \"framer-motion\";\nimport * as fabric from \"fabric\";\n\nexport default function GeneradorCreativo() {\n const [formulario, setFormulario] = useState({\n edad: \"\",\n localidad: \"\",\n tema: \"\",\n especialidad: \"\",\n evento: \"\"\n });\n\n const [imagenes, setImagenes] = useState([]);\n const [imagenesUsuario, setImagenesUsuario] = useState([]);\n const [textosEditables, setTextosEditables] = useState([{ texto: \"\", color: \"#000000\", fuente: \"Arial\", fontSize: 20, angle: 0 }]);\n const canvasRefs = useRef({});\n\n const manejarCambio = (e) => {\n setFormulario({ ...formulario, [e.target.name]: e.target.value });\n };\n\n const manejarImagenUsuario = (e) => {\n const archivos = Array.from(e.target.files);\n const urls = archivos.map((archivo) => URL.createObjectURL(archivo));\n setImagenesUsuario(urls);\n };\n\n const generarImagenes = () => {\n const simuladas = [\n \"/img/ejemplo1.png\",\n \"/img/ejemplo2.png\",\n \"/img/ejemplo3.png\"\n ];\n setImagenes(simuladas);\n };\n\n const descargarImagen = (index) => {\n const fabricCanvas = canvasRefs.current[`canvas-${index}`];\n if (fabricCanvas) {\n const dataURL = fabricCanvas.toDataURL({ format: \"png\" });\n const link = document.createElement(\"a\");\n link.download = `imagen-${index + 1}.png`;\n link.href = dataURL;\n link.click();\n }\n };\n\n const eliminarTextoEspecifico = (indexCanvas, textoIndex) => {\n const fabricCanvas = canvasRefs.current[`canvas-${indexCanvas}`];\n if (fabricCanvas) {\n const textos = fabricCanvas.getObjects(\"textbox\");\n if (textos[textoIndex]) {\n fabricCanvas.remove(textos[textoIndex]);\n fabricCanvas.renderAll();\n }\n }\n };\n\n const inicializarCanvas = (imgSrc, index) => {\n const canvasId = `canvas-${index}`;\n const el = document.getElementById(canvasId);\n if (!el || canvasRefs.current[canvasId]) return;\n\n const fabricCanvas = new fabric.Canvas(canvasId, {\n preserveObjectStacking: true\n });\n\n fabric.Image.fromURL(imgSrc, (img) => {\n fabricCanvas.setWidth(img.width);\n fabricCanvas.setHeight(img.height);\n fabricCanvas.setBackgroundImage(img, fabricCanvas.renderAll.bind(fabricCanvas));\n textosEditables.forEach((item, i) => {\n const text = new fabric.Textbox(item.texto, {\n left: 50,\n top: img.height - 80 - i * 40,\n fontSize: item.fontSize || 20,\n fill: item.color,\n fontFamily: item.fuente,\n angle: item.angle || 0,\n backgroundColor: \"rgba(255,255,255,0.7)\",\n padding: 5,\n editable: true\n });\n text.setControlsVisibility({\n mt: true,\n mb: true,\n ml: true,\n mr: true,\n bl: true,\n br: true,\n tl: true,\n tr: true,\n mtr: true\n });\n text.set({ selectable: true, hasControls: true });\n fabricCanvas.add(text);\n });\n fabricCanvas.renderAll();\n });\n canvasRefs.current[canvasId] = fabricCanvas;\n };\n\n useEffect(() => {\n const todasLasImagenes = [...imagenes, ...imagenesUsuario];\n todasLasImagenes.forEach((src, index) => {\n inicializarCanvas(src, index);\n });\n }, [imagenes, imagenesUsuario, textosEditables]);\n\n const renderFabricCanvas = (src, index) => (\n

\n );\n\n const actualizarTexto = (index, campo, valor) => {\n const nuevos = [...textosEditables];\n nuevos[index][campo] = valor;\n setTextosEditables(nuevos);\n };\n\n const agregarTexto = () => {\n setTextosEditables([...textosEditables, { texto: \"\", color: \"#000000\", fuente: \"Arial\", fontSize: 20, angle: 0 }]);\n };\n\n const eliminarTextos = (indexCanvas) => {\n const fabricCanvas = canvasRefs.current[`canvas-${indexCanvas}`];\n if (fabricCanvas) {\n const textos = fabricCanvas.getObjects(\"textbox\");\n textos.forEach((obj) => fabricCanvas.remove(obj));\n fabricCanvas.renderAll();\n }\n };\n\n return (\n

\n \n Creador de Imágenes Publicitarias Divertidas\n \n\n \n \n \n \n \n

\n        <div className=\"md:col-span-2\">\n          <label className=\"block mb-2 font-medium\">Sube tus propias imágenes (opcional):</label>\n          <Input type=\"file\" accept=\"image/*\" multiple onChange={manejarImagenUsuario} />\n        </div>\n        <div className=\"md:col-span-2 space-y-3\">\n          {textosEditables.map((item, idx) => (\n            <div key={idx} className=\"space-y-2\">\n              <Textarea placeholder={`Texto ${idx + 1}`} value={item.texto} onChange={(e) => actualizarTexto(idx, \"texto\", e.target.value)} />\n              <div className=\"flex gap-2\">\n                <Input type=\"color\" value={item.color} onChange={(e) => actualizarTexto(idx, \"color\", e.target.value)} className=\"w-1/6\" />\n                <select value={item.fuente} onChange={(e) => actualizarTexto(idx, \"fuente\", e.target.value)} className=\"w-2/6 rounded-md border px-2 py-1\">\n                  <option value=\"Arial\">Arial</option>\n                  <option value=\"Comic Sans MS\">Comic Sans</option>\n                  <option value=\"Courier New\">Courier</option>\n                  <option value=\"Georgia\">Georgia</option>\n                  <option value=\"Impact\">Impact</option>\n                  <option value=\"Times New Roman\">Times New Roman</option>\n                  <option value=\"Verdana\">Verdana</option>\n                </select>\n                <Input type=\"number\" min=\"10\" max=\"100\" value={item.fontSize} onChange={(e) => actualizarTexto(idx, \"fontSize\", parseInt(e.target.value))} placeholder=\"Tamaño\" className=\"w-1/6\" />\n                <Input type=\"number\" value={item.angle} onChange={(e) => actualizarTexto(idx, \"angle\", parseInt(e.target.value))} placeholder=\"Rotación\" className=\"w-1/6\" />\n              </div>\n            </div>\n          ))}\n          <Button onClick={agregarTexto} variant=\"outline\">+ Añadir otro texto</Button>\n        </div>\n      </motion.div>\n\n      <div className=\"text-center mt-6\">\n        <Button onClick={generarImagenes}>Generar imágenes</Button>\n      </div>\n\n      {(imagenes.length > 0 || imagenesUsuario.length > 0) && (\n        <motion.div \n          className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mt-10\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 1 }}\n        >\n          {[...imagenes, ...imagenesUsuario].map((src, index) => renderFabricCanvas(src, index))}\n        </motion.div>\n      )}\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","8058605470192235924","traceTime",1781140038569]
</article></body></html>