Loading...
Loading...
Agrega flechas, llamadas, rectángulos, dibujos a mano alzada y etiquetas sobre cualquier foto o captura de pantalla — arrastra para reposicionar, deshaz cualquier momento, exporta como PNG, JPG o WebP.
Un anotador de fotos te permite dibujar sobre una foto o captura de pantalla para resaltar, señalar o etiquetar algo. A diferencia de un editor completo, no cambia los píxeles subyacentes: tus anotaciones viven como una capa de formas de estilo vectorial (flechas, rectángulos, texto, trazos a mano alzada) que se integran en la imagen solo cuando exportas. Eso lo hace perfecto para informes de errores, comentarios de diseño, pasos de recetas, tareas escolares de los niños, listados de bienes raíces y el problema diario de 'mira esta cosa aquí mismo'. Esta herramienta te da cinco herramientas (seleccionar, texto, flecha, rectángulo, a mano alzada), una paleta de colores más un selector de color personalizado, y cuatro grosores de trazo. Todo se ejecuta en tu navegador, por lo que las capturas de pantalla con contenido sensible nunca salen de tu dispositivo.
Arrastra un archivo JPG, PNG o WebP al área de carga, o haz clic para seleccionar desde tu dispositivo. Capturas de pantalla, fotos de teléfono, fotos de productos: cualquier cosa que los navegadores puedan renderizar funciona.
Usa Flecha para señalar algo, Rectángulo para enmarcarlo, A mano alzada para circular o garabatear, y Texto para agregar una etiqueta. Elige un color de la paleta o abre el selector de color personalizado para cualquier valor hexadecimal.
Arrastra para dibujar flechas y rectángulos. Arrastra con A mano alzada para garabatear. Con la herramienta Texto, escribe primero tu etiqueta, luego haz clic en la foto para soltarla donde quieras.
Cambia a Seleccionar, luego arrastra cualquier anotación para moverla. Haz clic en Deshacer para eliminar la última, o haz clic en una anotación y presiona Eliminar. Borrar todo elimina la capa en un solo paso.
Elige PNG (sin pérdida, recomendado para capturas de pantalla), JPG (más pequeño, fotos) o WebP (mejor relación tamaño-calidad), luego haz clic en Descargar. Las anotaciones se integran en la exportación a la resolución completa de origen.
1. Decodifica la imagen fuente con createImageBitmap() — nativo, sin biblioteca. 2. Renderiza la foto en un lienzo en pantalla a escala de vista previa (≤ 900 px en el lado más largo). 3. Cada anotación se almacena como un objeto tipado (tipo, coordenadas, color, trazo). 4. Al exportar, dibuja la imagen de resolución original en un lienzo fresco primero. 5. Reproduce cada anotación encima usando ctx.drawImage / strokeRect / etc. 6. Codifica con canvas.toBlob(formato, calidad) y ofrécelo como descarga.
Almacenar anotaciones como objetos en lugar de integrarlas directamente en los píxeles tiene dos beneficios reales. Primero, mantienes la foto original intacta: deshacer, eliminar y reubicar son solo ediciones de estado, no se necesita una herramienta destructiva de 'borrar'. Segundo, la exportación utiliza la resolución completa de origen: la vista previa en pantalla puede reducirse a 900 píxeles, pero cuando haces clic en Descargar, la herramienta vuelve a rasterizar todo contra la imagen de tamaño original. Las coordenadas se almacenan en el espacio de la imagen y se convierten en escala al renderizar, por lo que una captura de pantalla de teléfono de 4032×3024 produce una exportación anotada de 4032×3024 con puntas de flecha y texto nítidos.
Referencia: MDN — CanvasRenderingContext2D
| Foto | Mejores herramientas para usar |
|---|---|
Captura de pantalla de la aplicación para un informe de errores | Rectángulo rojo alrededor de la interfaz de usuario rota + flecha roja con una etiqueta de texto 'este botón está desalineado'. Mantén un solo color de acento para que la anotación se lea como un solo mensaje. |
Foto de receta con etiquetas paso a paso | Flechas amarillas numeradas 1, 2, 3 apuntando a los ingredientes + pequeñas etiquetas de texto para cada uno. Un tamaño de texto más pequeño (16–24 px) mantiene la foto legible por debajo. |
Foto de pizarra de una reunión | Círculos a mano alzada alrededor de cajas clave + anotaciones de texto para contexto faltante. Usa un color de alto contraste (rojo o rosa) para que se muestre en pizarras ocupadas. |
Foto de listado de bienes raíces | Rectángulos para resaltar características (electrodomésticos de acero inoxidable, pisos de madera, etc.), etiquetas de texto cortas. El negro con un contorno sutil se lee bien en la mayoría de las tomas interiores. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización