# (alpha) Image Annotator - Annotez des images directement dans le visualiseur !

**URL:** <https://meta.discourse.org/t/alpha-image-annotator-annotate-images-right-inside-the-previewer/112881>\
**Category:** Theme component\
**Tags:** broken\
**Created:** [Mars 29, 2019, 12:38 UTC](https://meta.discourse.org/t/alpha-image-annotator-annotate-images-right-inside-the-previewer/112881 "2019-03-29T00:38:47Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![labofoz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/labofoz/32/135498_2.png) [@labofoz](https://meta.discourse.org/u/labofoz)\
**Post date:** [Mars 29, 2019, 12:38 UTC](https://meta.discourse.org/t/alpha-image-annotator-annotate-images-right-inside-the-previewer/112881/1 "2019-03-29T00:38:47Z")

</div>

[https://global.discourse-cdn.com/meta/original/3X/3/f/3fc0b8fbf741daef9df447a9cfde014abbb9d092.mp4](https://global.discourse-cdn.com/meta/original/3X/3/f/3fc0b8fbf741daef9df447a9cfde014abbb9d092.mp4)

(pas de son)

 ![](https://global.discourse-cdn.com/meta/original/3X/7/6/76284573e9a02556812d2264ded20b5afe9f207e.png)

# Annotateur d'images (alpha/aperçu)

> **Dépôt :** [https://github.com/labofoz/discourse-image-annotator](https://github.com/labofoz/discourse-image-annotator)  
> **Branche d’installation :** `discourse`  
> **Taille du composant :** ~42 Ko  
> **Dépend de Marker.js :** [voir leur licence](https://github.com/ailon/markerjs/blob/master/LICENSE) (nécessite une attribution ou un achat)

* * *

J’utilise mon Discourse comme alternative modifiable à Evernote, mais l’une des fonctionnalités qui me manque vraiment est l’annotation d’images. Ce composant de thème Discourse ajoute [Marker.js](https://markerjs.com/) à votre prévisualiseur de sujets, de sorte que chaque fois que vous cliquez sur une image, le « mode d’annotation » s’active, vous permettant de :

- Ajouter des cadres, des formes, des flèches et du texte
- Surligner ou censurer des parties de l’image
- Copier l’image annotée dans le presse-papiers
- Coller l’image dans l’éditeur, ce qui permet de conserver ou de supprimer l’original
- _Support mobile bientôt disponible_

Puisque vous copiez l’image du prévisualiseur vers l’éditeur, elle sera automatiquement téléchargée comme n’importe quelle autre image copiée/collée !

Il n’y a pas encore d’optimisations et c’est essentiellement une copie regroupée du [dépôt Marker.js](https://github.com/ailon/markerjs). Il peut y avoir des bugs et j’évalue encore différentes bibliothèques d’annotation, mais voici un avant-goût !

* * *

## Écran d’installation

J’expérimente encore, donc pour l’instant, assurez-vous d’utiliser la branche `discourse`, car la branche principale contient la source principale (je corrigerai cela bientôt) :

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/a/2adf5d98493a7d1c8730e9a1d24d798c22c419c4.png)

---

_[View the full topic](https://meta.discourse.org/t/alpha-image-annotator-annotate-images-right-inside-the-previewer/112881)._