Recadrer et enregistrer des images avec ImageEditor pour Xamarin.Forms

novembre 4, 2019

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

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 >

Vous trouverez plus d'informations à propos de cette ici .

Utilisons maintenant les API de sauvegarde : Par exemple, nous pouvons utiliser ImageEditorToolbar - CommandToolbarItem pour implémenter une option de sauvegarde.

Ajoutez le . ] CommandToolbarItem à la barre ImageEditorTool:

 < telerikImageEditor: CommandToolbarItem   Texte  =  "Sauvegardez"  [19459106] 
   
 Tapped . "OnSaveTapped"  />

2. Enregistrez l'image à l'intérieur du LocalApplicationData:

 private   async  nul   OnSaveTapped ( objet   expéditeur, EventArgs e)   
   [ de  . ] 
    var folderPath = Environment.GetFolderPath (Environment.SpecialFolder.LocalApplicationData);    
    = Path.Combine (folderPath,  "image.jpg" );    
    en utilisant   (fichier_var .Create (filePath))    
    {  [1945910]        
   this  .imageEditor.SaveAsync (fileStream, ImageFormat.Jpeg, 1);    
     [1945906] [1945906].  
   
    à attendre Application.Current.MainPage.DisplayAlert ( ""  "L'image est enregistrée avec la taille originale" [19659045] "OK" );    
  } 19659245] Voici le résultat final: 
  interface utilisateur Telerik pour Xamarin Feedback . 
 N'oubliez pas de consulter les différentes démos de la contrôle dans notre  SDK Sample Browser  et l’application  Telerik UI pour Xamarin Demos . 
 Si vous n’avez pas encore essayé la  Telerik UI pour Xamarin prenez faites un essai gratuit avec un  essai gratuit de offrant toutes les fonctionnalités et tous les contrôles à votre disposition, à un coût nul. 
 Autorisez votre application à  Edit  et  Sauvegarder  images avec  ImageEditor  pour  Xamarin.Forms:)  
 Codage heureux!

Source link

Enregistrer des images

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

Partager :