Image Annotator - Permite anotar imágenes en el visor

¡Hola a todos,

Junto con mi compañero de equipo @vliboolean1010, estamos emocionados de presentarles el nuevo Componente de Tema de Discourse: Anotador de Imágenes.

Siempre que haces clic en una imagen en el editor, se activan las siguientes funciones:

  • Agregar cuadros, formas, flechas y texto
  • Resaltar u ocultar partes de la imagen
  • Seleccionar y cambiar el color de las anotaciones
  • Las imágenes anotadas se actualizarán automáticamente después de hacer clic en guardar.
  • Compatible con navegadores como Safari, Firefox, Chrome y Safari para iOS
  • (La función de recorte de imágenes está en desarrollo)

Pantalla de instalación

Repositorio: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub

Video de demostración

46 Me gusta

¡Buen trabajo! ¿Esto se ha probado con imágenes alojadas en S3? Estoy obteniendo un error de solicitud de origen cruzado cuando S3 está habilitado.

9 Me gusta

Muchas gracias. Es increíble

7 Me gusta

Hola @davidkingham,

Gracias por el informe detallado del problema. Mientras intentamos resolverlo, una solución alternativa será subir la imagen desde tus dispositivos locales, en lugar de hacerlo desde fuentes en línea. :slight_smile:

4 Me gusta

Gracias, Chun, pero no es lo mismo. Estoy subiendo desde un dispositivo local, pero la imagen se está subiendo a un punto de conexión de S3 y ahí es donde surge el problema.

8 Me gusta

Estoy pensando que esto podría usarse para marcar automáticamente las fotos con el nombre de usuario, pero no estoy seguro de cómo hacerlo. ¿Quizás otro botón que imprima [nombre de usuario]@[dominio del sitio]?

3 Me gusta

¿Hay una función que permita hacer garabatos sobre una foto?

4 Me gusta

Así es mi problema. Cuando subo una imagen grande (por ejemplo, una captura de pantalla de nuestro foro para un tutorial), el sistema restringe automáticamente la visualización de la imagen según mis ajustes de tamaño máximo. Esto es un problema porque, si la imagen es grande, la redimensiona a un tamaño tan pequeño que resulta imposible de trabajar, y no puedo editar la versión original más grande.

Básicamente, esto limita su utilidad solo a imágenes más pequeñas que las configuraciones de “onebox”; en nuestro caso, por ejemplo, están establecidas en 400 x 400.

En esta imagen, se ven las mismas dos imágenes: una de ellas editada con este componente. El componente la hace ilegible.

Si pudieran configurarlo para que permita editar la imagen original, y no la versión onebox, sería absolutamente excelente.

¡Buen comienzo, de todos modos, y definitivamente veo su utilidad!

4 Me gusta

¿Es posible editar las anotaciones después de que se haya guardado la publicación?

3 Me gusta

No parece ser así. La imagen se vuelve a guardar cuando terminas de editarla.

4 Me gusta

Actualmente no hay características de ese tipo.

4 Me gusta

Error al escribir imágenes

ftOaYJktEr

2 Me gusta

He movido esto a #theme:broken-theme y le he añadido la etiqueta pr-welcome.

Creo que necesita bastante trabajo y apoyo para convertirse en un componente de tema recomendado adecuado.

6 Me gusta

He solucionado algunos problemas con la anotación de las imágenes.
Este es el enlace a la PR:

6 Me gusta

¡Genial, gracias, Nam! Ya no da error y guarda la imagen, así que eso es genial.

Mientras creaba la obra maestra de arriba, noté que hay bastantes cosas molestas al usar esto. Varias veces la anotación se inicializó en el área incorrecta. Tanto la barra de herramientas como el área de edición se desplazaron hasta la mitad de la página. ¿Crees que puedas investigar por qué está sucediendo esto?

6 Me gusta

Aquí está el enlace al PR para eliminar jQuery:

7 Me gusta

Me pregunto si podemos agregar controles de “recortar” y “rotar” al componente; parece algo que sería súper útil.

9 Me gusta

¡Lo revisaré tan pronto como sea posible!

6 Me gusta

¡Sin prisa alguna, estoy muy emocionado de ver que este componente está recibiendo atención; tiene mucho potencial.

9 Me gusta

Mientras trabajábamos con @markvanlan, nos dimos cuenta de que hay una nueva versión de markerjs.
Las imágenes se pueden editar en la ventana emergente. Esto resolverá muchos problemas.
Actualmente estoy trabajando en una PR.

9 Me gusta