ABR Image Tools

Qué hace

• Censura inteligente. Lee el texto de la imagen y encuentra DNI, NIE, IBAN, teléfonos, correos, tarjetas, IP y URLs, además de caras. Se revisa la lista y se tapa con desenfoque, pixelado o un bloque de color. Admite reglas propias por texto o expresión regular.
• Aviso antes de exportar. Si queda un dato sensible sin tapar, lo dice antes de guardar la imagen.
• Anotar para documentar. Rectángulos, círculos, flechas, líneas, texto, resaltador, bocadillos, estrellas, polígonos, pluma Bézier y trazo libre, con color, grosor, relleno, degradados y sombra.
• Un editor completo. Capas, grupos, selección múltiple, lienzo infinito con área de exportación, recorte, filtros, biblioteca de elementos reutilizables y deshacer ilimitado.
• Pestañas y autoguardado. Varias imágenes abiertas a la vez, guardadas solas en el navegador, y exportables como proyecto .abr o espacio de trabajo .abrz.
• Tamaño y peso. Redimensionar, y reducir peso hasta un tamaño de archivo objetivo. Exporta a PNG, JPG, WebP y SVG.
• IA en local. Quitar fondos, ampliar ×4, borrar marcas de agua y generar imágenes a partir de texto (experimental), todo en el equipo del usuario.
• Lotes. Quitar fondo, autocensura y redimensionado sobre muchas imágenes, con revisión de las que salen sin nada tapado, descarga en ZIP y apertura en el editor con la censura editable.
• Diagramas Mermaid convertidos en formas editables, paleta de comandos, modo presentación, modo oscuro e interfaz en español, inglés y chino.

Cómo está hecho

Sin servidor

Es un sitio estático. El OCR, la detección de caras y los modelos de IA se ejecutan en el navegador, en Web Workers, con WebAssembly o WebGPU. Las imágenes no salen nunca del equipo, y los proyectos se guardan en IndexedDB.

Clean Architecture y patrón Command

Dominio, infraestructura, estado e interfaz están separados. Cada elemento del lienzo es un comando que sabe dibujarse, moverse, serializarse y clonarse; el motor solo los recorre por capas. El historial guarda copias clonadas de los comandos en cada paso.

Lotes con censura editable

Las operaciones son un registro declarativo con su esquema de ajustes. Cuando el lote censura, guarda también la imagen original sin pérdida, y al abrirla en el editor llega con un comando de desenfoque editable por región, que no se puede deshacer por accidente.

Problemas que resolví

• Una censura que no salía en el fichero. El desenfoque y el pixelado solo se dibujaban en el lienzo en vivo; en la exportación no hacían nada. El algoritmo pasó a un módulo independiente del entorno.
• Un deshacer que no deshacía. Cuatro sitios modificaban un comando antes de guardar el historial y corrompían la entrada anterior. Ahora todos clonan antes de cambiar nada.
• Cero regiones detectadas y ningún error. Las reglas reactivas de Vue no se podían clonar con postMessage, y el error se perdía dentro de un Promise.allSettled.
• Una suite E2E que no probaba nada. El servidor de desarrollo daba un 500 por imports de tipos, el helper de los tests contaba siempre cero y los clics se perdían al azar. Arreglados los tres, la suite volvió a la CI.
• Un componente de 3.294 líneas. El lienzo se desmontó en 17 composables y dos componentes, hasta quedarse en 711 líneas.