UWP 浏览本地图片及对图片的裁剪

原文:UWP 浏览本地图片及对图片的裁剪

1.前言

准备给我的校园助手客户端添加一个修改头像的功能，但是查了好多资料都没有找到裁剪图片的简单的方法，最后才找到这个使用Launcher调用系统组件的简单办法，所以分享给大家。

2.界面部分：

很简单，就一个按钮和一个图片控件。

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Click="Button_Click" Content="lalala"/>
    <Image Name="Img" />
</StackPanel>

3.逻辑部分

首先是调用FileOpenPicker打开图片，为接下来的处理做准备

//创建和自定义 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.Source = bitmap;
	}
	catch(Exception ex)
	{
		Debug.WriteLine(ex.Message + ex.StackTrace);
	}
}

4.完整代码

using System;
using System.Diagnostics;
using Windows.ApplicationModel.DataTransfer;
using Windows.Foundation.Collections;
using Windows.Storage;
using Windows.System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

//“空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 上有介绍

namespace 图片裁剪
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void Button_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.Source = bitmap;
                    }
                    catch (Exception ex)
                    {
                        Debug.WriteLine(ex.Message + ex.StackTrace);
                    }
                }
            }
        }
    }
}

5.效果图

注：那个图片裁剪部分的代码我是参考的这里的：Guest
post: Fare il crop delle immagini usando l’app Foto di Windows 10 （原文是意大利文，可以谷歌翻译一下再看）。