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

原创 2017年03月04日 17:35:45

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 (原文是意大利文,可以谷歌翻译一下再看)。


版权声明:本文为博主原创文章,未经博主允许不得转载。

uwp之图片旋转动画实现

先放效果图。类似网易云音乐播放音乐时封面旋转效果两种实现方式,分别是前端(xaml)和后台(c#代码)实现,右边的图片旋转是在xaml实现,左边的长方形(其实是个Button控件)旋转是在c#代码里面...
  • hzw2945
  • hzw2945
  • 2017年05月18日 14:44
  • 682

UWP xaml 圆形头像

现在很多软件都喜欢使用圆形头像 win10 uwp使用圆形头像很简单 ...
  • lindexi_gd
  • lindexi_gd
  • 2015年11月10日 11:21
  • 2592

Win10 UWP xaml 延迟加载元素

xaml新增x:DeferLoadStrategy="Lazy" 延迟加载,到了需要再使用FindName
  • lindexi_gd
  • lindexi_gd
  • 2015年11月09日 19:55
  • 2616

win10 uwp 拖动控件

我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法。其中第一个是最差的,最后的才是我希望大神你去用。...
  • lindexi_gd
  • lindexi_gd
  • 2017年04月19日 20:02
  • 1163

win10 uwp 从StorageFile获取文件大小

本文主要:win10 uwp 获取文件大小
  • lindexi_gd
  • lindexi_gd
  • 2016年07月29日 10:28
  • 2310

Win 10 UWP开发系列:设置AppBarButton的图标

在WP8以前,页面最下面的四个小圆按钮是不支持绑定的,WP8.1 RT之后,系统按钮升级成了AppBarButton,并且支持绑定了。在Win10 UWP开发中,按钮的样式发生了变化,外面的圆圈没有了...
  • igweyou
  • igweyou
  • 2016年01月12日 10:12
  • 1825

win10 uwp 圆角按钮

本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮。...
  • lindexi_gd
  • lindexi_gd
  • 2016年07月29日 17:33
  • 2989

win10 uwp 截图 获取屏幕显示界面保存图片

本文主要讲如何保存我们的屏幕显示的,保存为图片,也就是截图,截我们应用显示的。我们来总的说下,就是用一个滚动条把我们的一个Grid放进去,然后Grid里面存在一张图片和一个TextBlock,图片就是...
  • lindexi_gd
  • lindexi_gd
  • 2016年11月29日 10:33
  • 2475

淘宝UWP--自定义图片缓存

一、应用场景 在淘宝应用首页,会有很多张图片,而这些首页图片不会经常改变,所以就需要缓存下来。这样就不必每次都从网络获取。 二、比较对象 1.系统缓存 对于系统缓存,我们...
  • igweyou
  • igweyou
  • 2016年01月21日 09:41
  • 1825

UWP入门(四)--设置控件样式

官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观。 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观。可分享至不同elements的资源中 创建可重用的sty...
  • u011033906
  • u011033906
  • 2017年03月21日 15:57
  • 1437
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UWP 浏览本地图片及对图片的裁剪
举报原因:
原因补充:

(最多只允许输入30个字)