Anotador de Imágenes

La anotación de imágenes es el proceso de añadir marcas visuales a una imagen — flechas, rectángulos, círculos, etiquetas de texto, resaltados y desenfoques — para llamar la atención sobre áreas específicas o transmitir información adicional. Los casos de uso comunes incluyen: tutoriales de software (resaltar botones y elementos de menú con flechas y etiquetas), comentarios de diseño (rodear problemas y añadir comentarios), informes de errores (anotar capturas de pantalla con pasos para reproducir) y redacción de privacidad (desenfocar caras, matrículas o texto sensible).

The technical implementation uses the Canvas API's 2D drawing context. Rectangles are drawn with strokeRect() and fillRect(). Circles and arrows use arc() and lineTo() with stroke(). Text is rendered with fillText() and strokeText(). Highlights use a semi-transparent fill color. Blurring is achieved by drawing the selected region at reduced resolution and scaling it back up, or by applying a CSS filter: blur() to a clipped region. Each annotation is stored as an object in an array, allowing undo/redo and re-rendering.

Para la redacción de privacidad, el desenfoque es preferible a la cobertura con color sólido porque preserva parte del contexto visual (todavía puedes saber que hay texto o una cara) mientras hace que el contenido sea ilegible. Sin embargo, el desenfoque no es criptográficamente seguro — algoritmos sofisticados a veces pueden recuperar texto desenfocado. Para información verdaderamente sensible (contraseñas, números de la Seguridad Social), usa rectángulos negros sólidos en lugar de desenfoques. La fuerza del desenfoque (radio) debe ser de al menos 10-15 píxeles para evitar la recuperación.

Usa colores consistentes para diferentes tipos de anotaciones: rojo para errores o problemas, verde para elementos correctos, azul para información, amarillo para resaltados. Mantén las anotaciones mínimas — demasiadas marcas en una imagen crean ruido visual y reducen la claridad. Usa flechas para señalar elementos específicos en lugar de rodear áreas grandes. Etiqueta cada anotación con un número o texto corto para que el espectador pueda seguir la secuencia.

When creating tutorials, annotate screenshots in the order of the steps. Use callout boxes (text on a colored background with an arrow pointing to the relevant area) for step-by-step instructions. Export the annotated image as PNG (not JPEG) to avoid compression artifacts around text and sharp lines. If the annotated image will be displayed on a high-DPI screen, render at 2x resolution and scale down with CSS for crisp text and lines.