如题所示,实现了选取本地图片,裁剪图片为圆形,当作用户头像的几个功能
思路来自于
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);
}
}
}
}
}
}
这里是运行效果
处女贴,若有不如意的地方还请多多包涵~~
也欢迎大噶多多来探讨呀