如題所示,實現了選取本地圖片,裁剪圖片爲圓形,當作用戶頭像的幾個功能
思路來自於
https://blog.csdn.net/lindexi_gd/article/details/49757187
https://blog.csdn.net/github_36704374/article/details/60334156
這兩位大大的文章,十分感謝指導
簡單說一下吧,界面就是一個頭像,一個選擇圖片的按鈕
<Page
x:Class="xxx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxx"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel Grid.Row="0">
<Ellipse Width="200" Height="200" Margin="10,10,10,10" >
<Ellipse.Fill>
<ImageBrush x:Name="img" ImageSource="assets/login.jpg"/>
</Ellipse.Fill>
</Ellipse>
</RelativePanel>
<RelativePanel Grid.Row="1">
<Button Content="choose picture"
Click="ChoosePicture_Click"/>
</RelativePanel>
</Grid>
</Page>
這裏圓形頭像是用橢圓ellipse設置的,上網查了下還有其它方法,效果大同小異,看你自己怎麼選擇啦~還有在imagebrush裏面,記得添加x:name='文件名',否則在c#裏的選擇文件時會失敗。
接下來廢話不多說,直接貼代碼(基本是抄上面兩位大大的。。。不過整合了展示+選取+裁剪,還是有一點實用價值的嘻嘻嘻,開發uwp登陸界面的話可以直接拿去用)
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel.DataTransfer;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
// https://go.microsoft.com/fwlink/?LinkId=234238 上介紹了“空白頁”項模板
namespace xxx
{
/// <summary>
/// 可用於自身或導航至 Frame 內部的空白頁。
/// </summary>
public sealed partial class Register : Page
{
public Register()
{
this.InitializeComponent();
}
private async void ChoosePicture_Click(object sender, RoutedEventArgs e)
{
// 創建和自定義 FileOpenPicker
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail; //可通過使用圖片縮略圖創建豐富的視覺顯示,以顯示文件選取器中的文件
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".jpeg");
picker.FileTypeFilter.Add(".png");
picker.FileTypeFilter.Add(".gif");
//選取單個文件
Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
//文件處理
if (file != null)
{
var inputFile = SharedStorageAccessManager.AddFile(file);
var destination = await ApplicationData.Current.LocalFolder.CreateFileAsync("Cropped.jpg", CreationCollisionOption.ReplaceExisting);//在應用文件夾中建立文件用來存儲裁剪後的圖像
var destinationFile = SharedStorageAccessManager.AddFile(destination);
var options = new LauncherOptions();
options.TargetApplicationPackageFamilyName = "Microsoft.Windows.Photos_8wekyb3d8bbwe";
//待會要傳入的參數
var parameters = new ValueSet();
parameters.Add("InputToken", inputFile); //輸入文件
parameters.Add("DestinationToken", destinationFile); //輸出文件
parameters.Add("ShowCamera", false); //它允許我們顯示一個按鈕,以允許用戶採取當場圖象(但是好像並沒有什麼卵用)
parameters.Add("EllipticalCrop", true); //截圖區域顯示爲圓(最後截出來還是方形)
parameters.Add("CropWidthPixals", 300);
parameters.Add("CropHeightPixals", 300);
//調用系統自帶截圖並返回結果
var result = await Launcher.LaunchUriForResultsAsync(new Uri("microsoft.windows.photos.crop:"), options, parameters);
//按理說下面這個判斷應該沒問題呀,但是如果裁剪界面點了取消的話後面會出現異常,所以後面我加了try catch
if (result.Status == LaunchUriStatus.Success && result.Result != null)
{
//對裁剪後圖像的下一步處理
try
{
// 載入已保存的裁剪後圖片
var stream = await destination.OpenReadAsync();
var bitmap = new BitmapImage();
await bitmap.SetSourceAsync(stream);
// 顯示
img.ImageSource = bitmap;
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message + ex.StackTrace);
}
}
}
}
}
}
這裏是運行效果
處女貼,若有不如意的地方還請多多包涵~~
也歡迎大噶多多來探討呀