UWP Create dynamic rectangle

0

I'm new in UWP and my first Task is crop imagine, now I'm trying to find how can I create a dynamic rectangle to crop imagine p.s. I'm sorry for the bad grammar.

My program must have button to open the file, then on the screen must be dynamic rectangle that user can change or move, and when user press "save" button image will cropping as rectangle size there is my C# code Thanks)

namespace Crop1
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        SoftwareBitmap softwareBitmap;
        private async void OpenFile(object sender, RoutedEventArgs e)
        {
            FileOpenPicker fileOpenPicker = new FileOpenPicker();
            fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            fileOpenPicker.FileTypeFilter.Add(".jpg");
            fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;

            var inputFile = await fileOpenPicker.PickSingleFileAsync();

            if (inputFile == null)
            {
                // The user cancelled the picking operation
                return;
            }

            using (IRandomAccessStream stream = await inputFile.OpenAsync(FileAccessMode.Read))
            {
                // Create the decoder from the stream
                BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

                // Get the SoftwareBitmap representation of the file
                softwareBitmap = await decoder.GetSoftwareBitmapAsync();
            }
            if (softwareBitmap.BitmapPixelFormat != BitmapPixelFormat.Bgra8 ||
    softwareBitmap.BitmapAlphaMode == BitmapAlphaMode.Straight)
            {
                softwareBitmap = SoftwareBitmap.Convert(softwareBitmap, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
            }

            var source = new SoftwareBitmapSource();
            await source.SetBitmapAsync(softwareBitmap);

            // Set the source of the Image control
            //imageControl.Source = source;

            p1rect1.Fill = new ImageBrush
            {
                ImageSource = source
            };
        }

        private async void Save(object sender, RoutedEventArgs e)
        {
            FileSavePicker fileSavePicker = new FileSavePicker();
            fileSavePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            fileSavePicker.FileTypeChoices.Add("JPEG files", new List<string>() { ".jpg"  , ".png"});
            fileSavePicker.SuggestedFileName = "image";

            var outputFile = await fileSavePicker.PickSaveFileAsync();

            if (outputFile == null)
            {
                // The user cancelled the picking operation
                return;
            }
            // SoftwareBitmap softwareBitmap;
            // BitmapDecoder decoder = await BitmapDecoder.CreateAsync(imageControl);



            SaveSoftwareBitmapToFile(softwareBitmap, outputFile);

        }
        private async void SaveSoftwareBitmapToFile(SoftwareBitmap softwareBitmap, StorageFile outputFile)
        {
            using (IRandomAccessStream stream = await outputFile.OpenAsync(FileAccessMode.ReadWrite))
            {
                // Create an encoder with the desired format
                BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);

                // Set the software bitmap
                encoder.SetSoftwareBitmap(softwareBitmap);

                //// Set additional encoding parameters, if needed
                //encoder.BitmapTransform.ScaledWidth = 320;
                //encoder.BitmapTransform.ScaledHeight = 240;
               //  encoder.BitmapTransform.Rotation = Windows.Graphics.Imaging.BitmapRotation.Clockwise90Degrees;
                encoder.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Fant;
                encoder.IsThumbnailGenerated = true;

                try
                {
                    await encoder.FlushAsync();
                }
                catch (Exception err)
                {
                    switch (err.HResult)
                    {
                        case unchecked((int)0x88982F81): //WINCODEC_ERR_UNSUPPORTEDOPERATION
                                                         // If the encoder does not support writing a thumbnail, then try again
                                                         // but disable thumbnail generation.
                            encoder.IsThumbnailGenerated = false;
                            break;
                        default:
                            throw err;
                    }
                }

                if (encoder.IsThumbnailGenerated == false)
                {
                    await encoder.FlushAsync();
                }


            }
        }
    }
}
c#
xaml
uwp
asked on Stack Overflow Oct 5, 2017 by Fr13nd • edited Oct 5, 2017 by Vijay Nirmal

1 Answer

1

You need to create a dynamic rectangle when your pointer is moving. So, you could register pointer relevant event for your root panel control.

Then, you could use RenderTargetBitmap class to generate a clipped picture and save it.

I've made a code sample for your reference:

<Canvas PointerMoved="Grid_PointerMoved" PointerReleased="Grid_PointerReleased" PointerPressed="Grid_PointerPressed">
    <Image x:Name="image">
    </Image>
    <Rectangle x:Name="rect" StrokeThickness="4" Stroke="#FFEA18A7" Visibility="Collapsed"/>
</Canvas>
    PointerPoint Point1, Point2;
    SoftwareBitmap softwareBitmap;
    private async void OpenFile()
    {
        FileOpenPicker fileOpenPicker = new FileOpenPicker();
        fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
        fileOpenPicker.FileTypeFilter.Add(".jpg");
        fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;

        var inputFile = await fileOpenPicker.PickSingleFileAsync();

        if (inputFile == null)
        {
            // The user cancelled the picking operation
            return;
        }

        using (IRandomAccessStream stream = await inputFile.OpenAsync(FileAccessMode.Read))
        {
            // Create the decoder from the stream
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

            // Get the SoftwareBitmap representation of the file
            softwareBitmap = await decoder.GetSoftwareBitmapAsync();
        }
        if (softwareBitmap.BitmapPixelFormat != BitmapPixelFormat.Bgra8 ||
softwareBitmap.BitmapAlphaMode == BitmapAlphaMode.Straight)
        {
            softwareBitmap = SoftwareBitmap.Convert(softwareBitmap, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
        }

        var source = new SoftwareBitmapSource();
        await source.SetBitmapAsync(softwareBitmap);

        image.Source = source;
    }

    private void Grid_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        Point1 = e.GetCurrentPoint(image);
    }

    private void Grid_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        Point2 = e.GetCurrentPoint(image);
    }

    private async void Grid_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        Point2 = e.GetCurrentPoint(image);
        rect.Visibility = Visibility.Visible;
        rect.Width = (int)Math.Abs(Point2.Position.X - Point1.Position.X);
        rect.Height = (int)Math.Abs(Point2.Position.Y - Point1.Position.Y);
        rect.SetValue(Canvas.LeftProperty, (Point1.Position.X < Point2.Position.X) ? Point1.Position.X : Point2.Position.X);
        rect.SetValue(Canvas.TopProperty, (Point1.Position.Y < Point2.Position.Y) ? Point1.Position.Y : Point2.Position.Y);
        await Task.Delay(100);
        RectangleGeometry geometry = new RectangleGeometry();
        geometry.Rect = new Rect(Point1.Position,Point2.Position);
        image.Clip = geometry;
    }

    private async void Save()
    {
        RenderTargetBitmap bitmap = new RenderTargetBitmap();
        await bitmap.RenderAsync(image);
        var pixelbuffer = await bitmap.GetPixelsAsync();
        var savefolder = ApplicationData.Current.LocalFolder;
        var savefile = await savefolder.CreateFileAsync("snapshot.png",CreationCollisionOption.GenerateUniqueName);
        using (var filestream = await savefile.OpenAsync(FileAccessMode.ReadWrite))
        {
            var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId,filestream);
            encoder.SetPixelData(BitmapPixelFormat.Bgra8,BitmapAlphaMode.Ignore,(uint)bitmap.PixelWidth,(uint)bitmap.PixelHeight,DisplayInformation.GetForCurrentView().LogicalDpi,DisplayInformation.GetForCurrentView().LogicalDpi,pixelbuffer.ToArray());
            await encoder.FlushAsync();
        }
    }

enter image description here

answered on Stack Overflow Oct 6, 2017 by Xie Steven

User contributions licensed under CC BY-SA 3.0