Cropping Image with Xamlcropcontrol for UI and WriteableBitmapEx

Question

For the past week I've been researching as much as i can on how to add the ability to crop a profile image in my windows store app. So far I have looked at the Microsoft solution to this but have decided to go a different route. I downloaded a control from NuGet called XamlCropControl. It works pretty well for the UI and even give me information like Original Height/Width The position of the cropped top/bottom/left/right/width/height all within the xaml control. my question is as how to take that information and crop the the image using WriteableBitmapEx. So far this is my code and i'm having a problem.

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 is the xamlcropcontrol.

This is the information from xamlcropcontrol

This is the problem im having

It tells me there is no deffinition for FromContent if i have the (imagetoResize) there but if i remove it i get no error. After all the cropping is done it will be uploading to azure blob storage which i have already setup.

Edit: Works like this.

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

You will have to use the WBX WinRT APIs for this. Looks like you are trying the WP / Silverlight methods.

Try this:

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

Note it takes an URI. In your case you can rather use the IRandomAccessStream directly:

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