locked
Crop Image in Canvas or scrollview? RRS feed

  • General discussion

  • Hi, I have put an image in the scrollview and canvas as xaml below:

    <ScrollViewer x:Name="scroll" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480">
                <Canvas x:Name="canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480" Background="Blue">
                <Image x:Name="photo" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Width="340" Height="480">
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>
                </Canvas>
    </ScrollViewer>

    After that, I created a button to load and crop the image:

     private async void btnCrop_Click(object sender, RoutedEventArgs e)
    {
                FileOpenPicker fileOpenPicker = new FileOpenPicker();
                fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;
                fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                fileOpenPicker.FileTypeFilter.Add(".jpg");
                fileOpenPicker.FileTypeFilter.Add(".jpeg");
                fileOpenPicker.FileTypeFilter.Add(".png");
                fileOpenPicker.FileTypeFilter.Add(".bmp");
                file = await fileOpenPicker.PickSingleFileAsync();
    
                if (file != null)
                {
                    var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                    BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
                    BitmapTransform transform = new BitmapTransform();
                    BitmapBounds bounds = new BitmapBounds();
                    bounds.X = bounds.Y = 0;
                    bounds.Height = bounds.Width = 150;
                    transform.Bounds = bounds;
    
                    PixelDataProvider pix = await decoder.GetPixelDataAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, transform, ExifOrientationMode.RespectExifOrientation, ColorManagementMode.ColorManageToSRgb);
                    byte[] pixels = pix.DetachPixelData();
                    WriteableBitmap cropBmp = new WriteableBitmap(340, 480);
                    Stream pixStream = cropBmp.PixelBuffer.AsStream();
                    pixStream.Write(pixels, 0, 150 * 150 * 4);
                    photo.Source = cropBmp;
                }
    }

    The image has been crop and displayed successful. But when I zoom my image, I just want crop the image within the canvas instead of hard code. The code above is hard code the BitmapBounds width and height. How do I solve it? Thanks

    Thursday, October 3, 2013 9:02 AM

All replies

  • Use RectangleGeometry,  something like this (from help)

    <Image Source="licorice.jpg" Height="200">
        <Image.Clip>
            <RectangleGeometry Rect="25,25,100,150" />
        </Image.Clip>
    </Image>

    Thursday, October 3, 2013 12:04 PM
  • But this is auto crop when load the image, what I want is click button to crop. Thanks 
    Thursday, October 3, 2013 3:01 PM
  • Put it into code behind then.

    Add:

    var  geometry = new RectangleGeometry();

    geometry.Rect = new Rect(0,0,150,150); // whatever you need

    photo.Clip = geometry;

    Remove:

    photo.Clip = null;

    and you know how to set the selected image:

    var bm = new BitmapImage();

    await bm.SetSourceAsync(fileStream);

    photo.Source = bm;

    Thursday, October 3, 2013 5:17 PM
  • Hi, thanks for your answer, I successful crop my image. But now I have another issue. How do I crop the image part within the canvas? My image is able to zoom in and zoom out. When I zoom the image and click crop button, the top left corner point is the image's top left corner point, it suppose to be canvas's top left corner point
    Friday, October 4, 2013 6:50 AM