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

        }
    }
}

這裏是運行效果




處女貼,若有不如意的地方還請多多包涵~~

也歡迎大噶多多來探討呀





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章