Recadrer et enregistrer des images avec ImageEditor pour Xamarin.Forms

La version officielle R3 2019 de l'interface utilisateur Telerik pour Xamarin est arrivée et le moment est idéal pour attirer votre attention sur quelques fonctionnalités utiles ajoutées à la commande Image Editor pour Xamarin .

Nous aimons à écouter: Nous avons reçu un certain nombre de demandes de fonctionnalités sur la création de formes différentes pour l'outil ImageEditor Crop ainsi que sur la possibilité de Enregistrer avec l'image modifiée. un facteur d'échelle spécifique. Et nous voici! Ces fonctionnalités font maintenant partie de l'ensemble des fonctionnalités de l'éditeur d'images.

Dans cet article de blog, je vous familiariserai avec les nouvelles possibilités de contrôle de Cultures et dans le dispositif de culture de

L'élément de recadrage comporte des propriétés qui vous permettent de spécifier la géométrie de de la sélection de la culture ainsi que les ratios d'aspect souhaités . . Nous avons ajouté les cultures circulaires et à ratio fixe y compris certaines des rations les plus populaires telles que 3: 2 4: 3 , 16: 9 . Vous trouverez plus de détails dans notre article d'aide.

Voici à quoi ressemble le trait de culture prédéfini : :

Et l'outil personnalisé:

Dans En outre, la commande comporte également un commutateur de rognage intelligent, simple et convivial, en fonction de l’emplacement du contact. Chaque fois que l’emplacement du contact définit un rectangle avec un rapport largeur / hauteur échangé, l’adaptateur de redimensionnement bascule afin que le rectangle de découpage alternatif, permettant ainsi de passer rapidement et facilement du découpage en paysage au portrait, et inversement.

Enregistrer des images

Avec RadImageEditor vous avez la possibilité d’enregistrer l’image actuellement modifiée. La nouvelle API que nous avons exposée vous permet de sauvegarder des images avec un facteur d’échelle spécifique ou avec une taille maximale, ainsi que de gérer les grandes images et de les sauvegarder à une taille qui correspond aux besoins de votre application.

Ces scénarios peuvent être réalisés avec la méthode SaveAsync et ses surcharges.

Pour plus d'informations sur la sauvegarde des images cliquez ici .

Xamarin.Forms ImageEditor – Crop et enregistrer la démo

Créons un exemple de démo en utilisant un cercle comme géométrie de rognage et sauvegardons l’image modifiée avec une qualité élevée.

Aux fins de la démonstration, le fichier .jpg est ajouté à chaque projet d’application. Vous pouvez charger des images de Fichier, Uri, Stream, Ressources

Voici un exemple de définition du RadImageEditor :

 < Grille >  [19459106] 
      [  Grid .RowDefinitions >    
    < RowDefinition   />   [1945926]].    </  Grid.RowDefinitions >    
    < telerikImageEditor: Auteur ] x: Name  =  "imageEditor" >    
      telerikImageEditor: RadImageEditor.Source  ]>    
    < OnPlatform   x: TypeArguments  =  "ImageSource"   Par défaut  ] =  "image.jpg"  />    
    </  telerikImageEditor: RadImageEditor.Source > / > . ]  
    </  telerikImageEditor: RadImageEditor >  [19459266]  
    ] Grille > 

Si nous voulons recadrer notre image en forme de cercle, nous devons ajouter RadImageEditorToolbar avec la définition de recadrage souhaitée:

 < Grid >   
    < Grid.RowDefinitions >  [1945929]  <        RowDefinition   />    
    < RowDefinition   Hauteur  =  "Auto" [19659027] />    
    </  Grid.RowDefinitions >  [1945929] </  Grid.RowDefinitions          

    < telerikImageEditor: RadImageEditor   x: Nom  =  "imageEditor" >  [1945926] ] 
    < telerikImageEditor: RadImageEditor.Source >    
           ] OnPlatform   x: TypeArguments  =  "ImageSource"   Default  =  "image.jpg"  />     

 ]    </  telerikImageEditor: RadImageEditor.Source >  [19459266]  
    [/ telerikImageE ditor: RadImageEditor >    
   
    




  


               




 
    ] =  "{x: Reference imageEditor}"    
    AutoGenerateItems  =  "Faux"  [1945924] ]  
    Grid.Row  =  "1" > 
  [1945927]]. ]  < telerikImageEditor: CropToolbarItem >    

  >  [1945927]       
    < telerikImageEditor: CropDefinition   Texte  =  "Circle"   AspectRatio  =  "1: 1" >   
    < telerikImageEditor: CropDefinition.Geometry >     

    telerikCommon: RadEllipseGeometry   Centre  =  "0.5,0.5"   Radius  =  "0.5,0.5"  />   [1945924].  

    </  telerikImageEditor: CropDefinition.Geometry >     

   /  telerikImageEditor: CropDefinition >    
  [1 9459027]  </  telerikImageEditor: CropToolbarItem.CropDefinitions >    
    
 [/ ]>    

    </  telerikImageEditor: RadImageEditorToolbar >    </  Grille >