Anotador de Imagens

A anotação de imagem é o processo de adicionar marcas visuais a uma imagem — setas, retângulos, círculos, rótulos de texto, destaques e desfocagens — para chamar a atenção para áreas específicas ou transmitir informações adicionais. Casos de uso comuns incluem: tutoriais de software (destacando botões e itens de menu com setas e rótulos), feedback de design (circundando problemas e adicionando comentários), relatórios de bugs (anotando capturas de tela com passos para reproduzir) e censura de privacidade (desfocando rostos, placas de carro ou texto sensível).

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 censura de privacidade, desfocar é preferível a cobrir com cor sólida porque preserva algum contexto visual (você ainda pode perceber que há texto ou um rosto) enquanto torna o conteúdo ilegível. No entanto, a desfocagem não é criptograficamente segura — algoritmos sofisticados às vezes podem recuperar texto desfocado. Para informações verdadeiramente sensíveis (senhas, números de seguro social), use retângulos pretos sólidos em vez de desfocagem. A intensidade da desfocagem (raio) deve ser de pelo menos 10-15 pixels para impedir a recuperação.

Use cores consistentes para diferentes tipos de anotações: vermelho para erros ou problemas, verde para itens corretos, azul para informações, amarelo para destaques. Mantenha as anotações mínimas — muitas marcas em uma imagem criam ruído visual e reduzem a clareza. Use setas para apontar para elementos específicos em vez de circular grandes áreas. Rotule cada anotação com um número ou texto curto para que o visualizador possa seguir a sequência.

Ao criar tutoriais, anote as capturas de tela na ordem das etapas. Use caixas de chamada (texto em um fundo colorido com uma seta apontando para a área relevante) para instruções passo a passo. Exporte a imagem anotada como PNG (não JPEG) para evitar artefatos de compressão ao redor do texto e linhas nítidas. Se a imagem anotada for exibida em uma tela de alto DPI, renderize em resolução 2x e reduza com CSS para texto e linhas nítidos.