Image Annotator - Permite anotar imagens no visualizador

Olá a todos,

Juntamente com meu colega @vliboolean1010, estamos animados em apresentar a vocês o novo Tema-Componente do Discourse, o Anotador de Imagens.

Sempre que você clicar na imagem no editor, os recursos serão ativados:

  • Adicionar caixas, formas, setas e texto
  • Destacar ou censurar partes da imagem
  • Selecionar e alterar a cor das anotações
  • As imagens anotadas serão atualizadas automaticamente após clicar em salvar
  • Suporta navegadores como Safari, Firefox, Chrome e iOS Safari
  • (A funcionalidade de recorte de imagem está em desenvolvimento)

Tela de Instalação

Repositório: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub

Vídeo de Demonstração

46 curtidas

Bom trabalho! Isso foi testado com imagens hospedadas no S3? Estou recebendo um erro de solicitação entre origens quando o S3 está ativado.

9 curtidas

Muito obrigado. É incrível.

7 curtidas

Olá @davidkingham,

Obrigado pelo relatório detalhado do problema. Enquanto tentamos resolver essa questão, uma solução alternativa será fazer o upload da imagem a partir dos seus dispositivos locais, em vez de carregá-la a partir de fontes online. :slight_smile:

4 curtidas

Obrigado, Chun, mas isso não é a mesma coisa. Estou fazendo o upload de um dispositivo local, mas a imagem está sendo enviada para um endpoint do S3, e é aí que surge o problema.

8 curtidas

Estou pensando que isso poderia ser usado para marcar fotos automaticamente com o nome de usuário, mas não tenho certeza de como fazer isso. Talvez um outro botão que imprima [nome de usuário]@[domínio do site]?

3 curtidas

Existe uma função que permite rabiscar sobre uma foto?

4 curtidas

Então, aqui está o meu problema. Quando eu faço o upload de uma imagem grande (digamos, uma captura de tela do nosso fórum para um tutorial), o sistema restringe automaticamente a exibição da imagem com base nas minhas configurações de imagem máxima. Isso é um problema porque, se a imagem for grande, ela é redimensionada para um tamanho impossivelmente pequeno, e eu não consigo editar a versão maior.

Basicamente, isso a restringe a ser útil apenas para imagens menores que as configurações de “onebox”; as nossas são (por exemplo) definidas para 400 x 400.

Nesta imagem, vemos as mesmas duas imagens, sendo uma editada com este componente. O componente a torna ilegível.

Se você pudesse configurá-lo para que seja possível editar a imagem original, e não a versão onebox, isso seria absolutamente excelente.

Ótimo começo, de qualquer forma, e eu definitivamente vejo sua utilidade!

4 curtidas

É possível editar anotações depois que o post foi salvo?

3 curtidas

Não parece ser assim. Ele re-salva a imagem quando você termina de editar.

4 curtidas

Atualmente, não há recursos desse tipo.

4 curtidas

Erro ao escrever imagens

ftOaYJktEr

2 curtidas

Movi isso para #theme:broken-theme e adicionei a tag pr-welcome.

Acredito que ainda precise de bastante trabalho e suporte para se tornar um componente de tema recomendado adequado.

6 curtidas

Corrigi alguns problemas com a anotação das imagens.
Este é o link para o PR:
https://github.com/discourse/discourse-image-annotator/pull/49#issue-655300799

6 curtidas

Ótimo, obrigado, Nam. Não há mais erros e a imagem é salva, então isso é legal

Percebi, ao criar a obra-prima acima, que há algumas coisas bem irritantes ao usar isso. Várias vezes a anotação foi inicializada na área errada. Tanto a barra de ferramentas quanto a área de edição foram deslocadas pela metade da página. Você acha que consegue descobrir por que isso está acontecendo?

6 curtidas

Aqui está o link para o PR de remoção do Jquery:

7 curtidas

Será que conseguimos adicionar controles de “recortar” e “girar” ao componente? Parece algo que seria super útil.

9 curtidas

Vou verificar isso o mais rápido possível!

6 curtidas

Sem pressa nenhuma, muito animado em ver esse componente recebendo atenção, ele tem tanto potencial.

9 curtidas

Ao trabalhar com @markvanlan, percebemos que há uma nova versão do markerjs.
As imagens podem ser editadas no popup. Isso resolverá muitos problemas.
Estou trabalhando em um PR agora.

9 curtidas