使用 UI 和 WriteableBitmapEx 的 Xamlcropcontrol 裁剪图像

Question

在过去的一周里，我一直在尽可能多地研究如何在我的 windows 商店应用程序中添加裁剪个人资料图片的功能。到目前为止，我已经查看了 Microsoft 对此的解决方案，但决定采用不同的方法。我从 NuGet 下载了一个名为 XamlCropControl 的控件。它对 UI 非常有效，甚至给我信息，如原始 Height/Width 裁剪 top/bottom/left/right/width/height 的位置都在 xaml 控件内。我的问题是如何获取该信息并使用 WriteableBitmapEx 裁剪图像。到目前为止，这是我的代码，但我遇到了问题。

private async void ProfilePhotoImageClick(object sender, TappedRoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".png");

    StorageFile file = await openPicker.PickSingleFileAsync();

    if (file != null)
    {
        using (Windows.Storage.Streams.IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
        {
            Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage = new BitmapImage();

            bitmapImage.SetSource(fileStream);
            BackgroundLogo.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            PhotoUploadCropper.Opacity = 1;
            PhotoUploadCropper.ImageSource = bitmapImage;
            ProfileSetupStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            imagetoResize = bitmapImage;
        }
    }
}

BitmapImage imagetoResize;

private void AcceptPhotoImageCropClick(object sender, RoutedEventArgs e)
{
    WriteableBitmap bmp = new WriteableBitmap(0,0).FromContent(imagetoResize);
    var croppedBmp = bmp.Crop(0, 0, bmp.PixelWidth / 2, bmp.PixelHeight / 2);
    croppedBmp.SaveToMediaLibrary("ProfilePhoto.jpg");
}

PhotoUploadCropper 是 xamlcropcontrol。

This is the information from xamlcropcontrol

This is the problem im having

它告诉我，如果我在那里有 (imagetoResize)，那么 FromContent 没有定义，但是如果我删除它，我就不会出错。完成所有裁剪后，它将上传到我已经设置的 azure blob 存储。

编辑：像这样工作。

private async void ProfilePhotoImageClick(object sender, TappedRoutedEventArgs e)
    {
        FileOpenPicker openPicker = new FileOpenPicker();
        openPicker.ViewMode = PickerViewMode.Thumbnail;
        openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

        openPicker.FileTypeFilter.Add(".jpg");
        openPicker.FileTypeFilter.Add(".jpeg");
        openPicker.FileTypeFilter.Add(".png");

        StorageFile file = await openPicker.PickSingleFileAsync();

        if (file != null)
        {
            using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
            {
                BitmapImage bitmapImage = new BitmapImage();
                await bitmapImage.SetSourceAsync(fileStream);

                fileclone = file;

                BackgroundLogo.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                PhotoUploadCropper.IsEnabled = true;
                PhotoUploadCropper.Opacity = 1;
                PhotoUploadCropper.ImageSource = bitmapImage;
                ProfileSetupStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

            }
        }
    }
    StorageFile fileclone;

    async Task<WriteableBitmap> LoadBitmap(StorageFile file)
    {
        int cropx = PhotoUploadCropper.CropTop;
        int cropy = PhotoUploadCropper.CropLeft;
        int cropW = PhotoUploadCropper.CropWidth;
        int cropH = PhotoUploadCropper.CropHeight;

        using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
        {
            var bmp = await BitmapFactory.New(1, 1).FromStream(fileStream);
            var croppedBmp = bmp.Crop(cropy, cropx, cropW, cropH);
            var resizedcroppedBmp = croppedBmp.Resize(200, 200, WriteableBitmapExtensions.Interpolation.Bilinear);

            return resizedcroppedBmp;
        }
    }

    private async void AcceptPhotoImageCropClick(object sender, RoutedEventArgs e)
    {

        var CroppedBMP = await CropBitmap(fileclone);

        using (IRandomAccessStream fileStream = new InMemoryRandomAccessStream())
        {
            string filename = Path.GetRandomFileName() + ".JPG";
            var file = await Windows.Storage.ApplicationData.Current.TemporaryFolder.CreateFileAsync(filename, CreationCollisionOption.GenerateUniqueName);
            using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
            {
                BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
                Stream pixelStream = CroppedBMP.PixelBuffer.AsStream();
                byte[] pixels = new byte[pixelStream.Length];
                await pixelStream.ReadAsync(pixels, 0, pixels.Length);
                encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)CroppedBMP.PixelWidth, (uint)CroppedBMP.PixelHeight, 96.0, 96.0, pixels);
                await encoder.FlushAsync();
            }

            ProfilePhotoButtonsGrid.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            BackgroundLogo.Visibility = Windows.UI.Xaml.Visibility.Visible;
            PhotoUploadCropper.IsEnabled = false;
            PhotoUploadCropper.Opacity = 0;
            ProfileSetupStackPanel.Visibility = Windows.UI.Xaml.Visibility.Visible;

            if (fileStream != null)
            {
                UploadFile(file);
            }
        }
    }

Answer 1

您必须为此使用 WBX WinRT API。看起来您正在尝试 WP/Silverlight 方法。

试试这个：

    async Task<WriteableBitmap> LoadBitmap(string path)
    {
        Uri imageUri = new Uri(BaseUri, path);
        var bmp = await BitmapFactory.New(1, 1).FromContent(imageUri);
        return bmp;
    }

注意它需要一个 URI。在您的情况下，您可以直接使用 IRandomAccessStream：

 var bmp = await BitmapFactory.New(1, 1).FromStream(fileStream);

使用 UI 和 WriteableBitmapEx 的 Xamlcropcontrol 裁剪图像

Cropping Image with Xamlcropcontrol for UI and WriteableBitmapEx

c#

writeablebitmapex

winrt-xaml

windows-store-apps