Syncfusion React Image Editor

SyncfusionOutils de documents et d'imagesJavaScript

Un composant React complet pour l’édition et l’annotation avancées d’images.

  • Prend en charge le recadrage, la rotation, le retournement, le zoom et l’application de filtres.
  • Permet les annotations avec des formes, du texte et des dessins à main levée.
  • Exporte les images aux formats JPEG, PNG et SVG avec une barre d’outils personnalisable.
Syncfusion logo

Prix à partir de:

Chargement...
Disponible dans
Syncfusion Essential Studio UI Component SuiteChargement
Syncfusion Essential Studio EnterpriseChargement
image du produit Syncfusion React Image Editor
Syncfusion React Image Editor est un composant riche en fonctionnalités qui permet de visualiser, modifier et annoter des images directement dans les applications web. Il prend en charge les tâches courantes de manipulation d’images telles que le recadrage, le redimensionnement, la rotation et le dessin, aidant ainsi les développeurs à intégrer l’édition d’images interactive dans leurs applications.

Chargement et enregistrement d’images

Ouvrez des images à partir de base64, d’ImageData ou d’URL prenant en charge les formats PNG, JPEG et SVG. Enregistrez les images modifiées dans plusieurs formats avec un contrôle sur les noms de fichiers et la qualité.

Sélection et recadrage d’images

Sélectionnez des zones d’image à l’aide d’options personnalisées, carrées, circulaires ou de rapports d’aspect prédéfinis. Recadrez efficacement les images en faisant glisser et en redimensionnant les zones de sélection.

Transformation d’image

Faites pivoter les images dans le sens horaire ou antihoraire par incréments de 90 degrés et retournez les images horizontalement ou verticalement, y compris toutes les annotations appliquées.

Prise en charge des annotations

Ajoutez du texte, des formes (rectangles, ellipses, lignes), des dessins à main levée, des superpositions d’images, des chemins et des flèches. Personnalisez la couleur, la largeur du trait, les propriétés de police et le positionnement.

Fonctionnalité de zoom et de déplacement

Ajustez l’échelle et la position de l’image avec le zoom à l’aide du clavier, de la molette de la souris ou des gestes tactiles. Déplacez-vous pour afficher dynamiquement différentes zones de l’image.

Personnalisation de la barre d’outils

Modifiez la barre d’outils intégrée en ajoutant, supprimant ou remplaçant des éléments avec des modèles jsx personnalisés afin d’adapter l’interface utilisateur à des besoins spécifiques.

Filtres d’image et réglages fins

Appliquez des filtres prédéfinis comme sepia, grayscale, invert, warm et cold. Réglez finement les propriétés de l’image, notamment la luminosité, le contraste, l’exposition, la teinte, la saturation, l’opacité et le flou via l’interface utilisateur ou les API.

Interface responsive et adaptée au tactile

Le composant s’adapte automatiquement à différentes tailles d’écran et à différents types d’entrée, offrant une expérience fluide sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

Gestion de l’ordre Z pour les annotations

Contrôlez la superposition des annotations pour gérer le chevauchement et la visibilité, ce qui est essentiel pour créer des compositions d’images complexes.

API et thématisation conviviales pour les développeurs

Offre de nombreuses API pour un contrôle programmatique et prend en charge plusieurs thèmes intégrés avec des options de thématisation personnalisée à l’aide de variables SASS ou de Theme Studio.

Compatibilité du produit

Consultez les détails ci-dessous pour vous assurer que ce produit est pris en charge dans votre environnement.

Type de composant

  • JavaScript

Plateforme JavaScript

  • React