uwp圆形头像以及选取本地图片当作头像

如题所示,实现了选取本地图片,裁剪图片为圆形,当作用户头像的几个功能

思路来自于

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);
                    }
                }
            }

        }
    }
}

这里是运行效果




处女贴,若有不如意的地方还请多多包涵~~

也欢迎大噶多多来探讨呀





没有更多推荐了,返回首页