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

简介: 原文:UWP 浏览本地图片及对图片的裁剪 1.前言 准备给我的校园助手客户端添加一个修改头像的功能,但是查了好多资料都没有找到裁剪图片的简单的方法,最后才找到这个使用Launcher调用系统组件的简单办法,所以分享给大家。
原文: 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  (原文是意大利文,可以谷歌翻译一下再看)。


目录
相关文章
|
1月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
46 3
|
移动开发 前端开发 JavaScript
【移动端】实现相册的上传和缩放裁剪
做项目时,在移动端,需要实现用户相册图片的上传,并对图片进行缩放裁剪的功能。下面说一下实现流程。
160 1
【移动端】实现相册的上传和缩放裁剪
|
iOS开发
iOS开发 - 保存图片到相册和保存屏幕截图到相册
iOS开发 - 保存图片到相册和保存屏幕截图到相册
556 0
|
计算机视觉
【方便的Opencv】实现图片合成视频+附带图片生成gif
【方便的Opencv】实现图片合成视频+附带图片生成gif
【方便的Opencv】实现图片合成视频+附带图片生成gif
|
图形学
PPT制作三大技巧:图标 、图片背景透明和自动函数
PPT制作三大技巧:图标 、图片背景透明和自动函数
243 0
PPT制作三大技巧:图标 、图片背景透明和自动函数
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
SwiftUI—如何下载并使用图像视图显示网络图片
SwiftUI—如何下载并使用图像视图显示网络图片
1536 0
SwiftUI—如何下载并使用图像视图显示网络图片
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
143 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)