Loading...
Loading...
Ajoutez des flèches, des appels, des rectangles, des dessins à main levée et des étiquettes sur n'importe quelle photo ou capture d'écran — faites glisser pour repositionner, annulez à tout moment, exportez en PNG, JPG ou WebP.
Un annotateur de photo vous permet de dessiner sur une photo ou une capture d'écran pour mettre en évidence, pointer ou étiqueter quelque chose. Contrairement à un éditeur complet, il ne modifie pas les pixels sous-jacents — vos annotations vivent comme une couche de formes de style vectoriel (flèches, rectangles, texte, traits à main levée) qui sont intégrées à l'image uniquement lors de l'exportation. Cela le rend parfait pour les rapports de bogues, les retours de conception, les étapes de recettes, le marquage des devoirs des enfants, les annonces immobilières et le problème quotidien de 'voir cette chose juste ici'. Cet outil vous donne cinq outils (sélection, texte, flèche, rectangle, à main levée), une palette de couleurs plus un sélecteur de couleur personnalisée, et quatre largeurs de trait. Tout fonctionne dans votre navigateur, donc les captures d'écran avec du contenu sensible ne quittent jamais votre appareil.
Faites glisser un fichier JPG, PNG ou WebP dans la zone de téléchargement, ou cliquez pour choisir depuis votre appareil. Les captures d'écran, les photos de téléphone, les photos de produits — tout ce que les navigateurs peuvent rendre fonctionne.
Utilisez Flèche pour pointer quelque chose, Rectangle pour l'encadrer, À main levée pour entourer ou griffonner, et Texte pour ajouter une étiquette. Choisissez une couleur dans la palette ou ouvrez le sélecteur de couleur personnalisée pour toute valeur hexadécimale.
Faites glisser pour dessiner des flèches et des rectangles. Faites glisser avec À main levée pour griffonner. Avec l'outil Texte, tapez d'abord votre étiquette, puis cliquez sur la photo pour la déposer où vous le souhaitez.
Passez à Sélectionner, puis faites glisser toute annotation pour la déplacer. Cliquez sur Annuler pour supprimer la dernière, ou cliquez sur une annotation et appuyez sur Supprimer. Tout effacer supprime la couche en une seule étape.
Choisissez PNG (sans perte, recommandé pour les captures d'écran), JPG (plus petit, photos), ou WebP (meilleur rapport taille/qualité), puis cliquez sur Télécharger. Les annotations sont intégrées à l'exportation à la résolution source complète.
1. Décodez l'image source avec createImageBitmap() — natif, pas de bibliothèque. 2. Rendre la photo sur un canevas à l'écran à l'échelle de prévisualisation (≤ 900 px sur le côté le plus long). 3. Chaque annotation est stockée comme un objet typé (type, coordonnées, couleur, trait). 4. Lors de l'exportation, dessinez d'abord l'image à résolution originale sur un nouveau canevas. 5. Rejouez chaque annotation par-dessus en utilisant ctx.drawImage / strokeRect / etc. 6. Encodez avec canvas.toBlob(format, quality) et proposez-le en téléchargement.
Stocker les annotations en tant qu'objets plutôt que de les intégrer directement aux pixels présente deux réels avantages. Tout d'abord, vous gardez la photo originale intacte — annuler, supprimer et repositionner ne sont que des modifications d'état, aucun outil 'effacer' destructeur n'est nécessaire. Deuxièmement, l'exportation utilise la résolution source complète : l'aperçu à l'écran peut être réduit à 900 pixels, mais lorsque vous cliquez sur Télécharger, l'outil re-rasterise tout par rapport à l'image de taille originale. Les coordonnées sont stockées dans l'espace image et converties à l'échelle lors du rendu, donc une capture d'écran de téléphone 4032×3024 produit une exportation annotée 4032×3024 avec des pointes de flèche et du texte nets.
Référence : MDN — CanvasRenderingContext2D
| Photo | Meilleurs outils à utiliser |
|---|---|
Capture d'écran de l'application pour un rapport de bogue | Rectangle rouge autour de l'interface utilisateur cassée + flèche rouge avec une étiquette de texte 'ce bouton est mal aligné'. Restez sur une seule couleur d'accent pour que le balisage soit perçu comme un message unique. |
Photo de recette avec des étiquettes étape par étape | Flèches jaunes numérotées 1, 2, 3 pointant vers les ingrédients + petites étiquettes de texte pour chacun. Une taille de texte plus petite (16–24 px) garde la photo lisible en dessous. |
Photo de tableau blanc d'une réunion | Cercles à main levée autour des cases clés + annotations textuelles pour le contexte manquant. Utilisez une couleur à fort contraste (rouge ou rose) pour qu'elle se voit sur des tableaux blancs chargés. |
Photo d'annonce immobilière | Rectangles pour mettre en évidence les caractéristiques (appareils en acier inoxydable, parquet, etc.), étiquettes de texte courtes. Le noir avec un contour subtil se lit bien sur la plupart des prises de vue intérieures. |
Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.
Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.
Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.
Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.
Dernière mise à jour