HOW to crop image in WPF VB

Question

0.00/5 (No votes)

See more:

i cant crop image on image control please help.

when i am transfer the canvas x,y,crop height and width to crop function it gives wrong small crop image

Thanks in advance.

What I have tried:

    Public Function Crop(ByVal srcBitmap As Bitmap, _
ByVal cropX As Integer, ByVal cropY As Integer, ByVal cropWidth As Integer, ByVal cropHeight As Integer) As Bitmap

        ' Create the new bitmap and associated graphics object
        Dim bmp As New Bitmap(srcBitmap, cropHeight, cropWidth)

        Dim g As Graphics = Graphics.FromImage(bmp)

        Dim rect As Rectangle = New Rectangle(cropX, cropY, cropWidth, cropHeight)
        ' Draw the specified section of the source bitmap to the new one
        g.DrawImage(srcBitmap, New Rectangle(0, 0, cropHeight, cropWidth), rect, GraphicsUnit.Pixel)
        ' Clean up
        srcBitmap.Dispose()
        Return bmp



    End Function

Posted 10-Aug-17 19:50pm

ketan Ram Patil

Updated 11-Aug-17 3:55am

Add a Solution

Comments

Graeme_Grant 11-Aug-17 1:59am

You are using old GDI+ in a WPF app. Why?

ketan Ram Patil 11-Aug-17 2:21am

Dim rect1 As New Rect(Canvas.GetLeft(selectionRectangle), Canvas.GetTop(selectionRectangle), selectionRectangle.Width, selectionRectangle.Height)
Dim rcFrom As New System.Windows.Int32Rect()
rcFrom.X = CInt((rect1.X) * (image1.Source.Width) / (image1.Width))
rcFrom.Y = CInt((rect1.Y) * (image1.Source.Height) / (image1.Height))
rcFrom.Width = CInt((rect1.Width) * (image1.Source.Width) / (image1.Width))
rcFrom.Height = CInt((rect1.Height) * (image1.Source.Height) / (image1.Height))
'Dim BitmapImage As BitmapImage
'BitmapImage = image1.Source
'BitmapImage.StreamSource.Seek(0, System.IO.SeekOrigin.Begin)
Dim bs As BitmapSource = New CroppedBitmap(TryCast(image1.Source, BitmapSource), rcFrom)
image2.Source = bs
End If

i am also use this function but it works only for small crop.
for large crop it gives "value does not fall with in expected range " :(

Graeme_Grant 11-Aug-17 2:29am

Did you look at the link below?

ketan Ram Patil 11-Aug-17 2:38am

i am fresher in wpf :(
where to send the canvas x,y,hight,widh values..?

Graeme_Grant 11-Aug-17 2:40am

Read the solution below - Microsoft GIVES you a working solution.

ketan Ram Patil 11-Aug-17 8:20am

i tried my best but i cant match this code in my project. please help

Graeme_Grant 11-Aug-17 8:26am

Don't use GDI+.

Here is the code from the link below:

' Create an Image element.
Dim croppedImage As New Image()
croppedImage.Width = 200
croppedImage.Margin = New Thickness(5)

' Create a CroppedBitmap based off of a xaml defined resource.
Dim cb As New CroppedBitmap(CType(Me.Resources("masterImage"), BitmapSource), New Int32Rect(30, 20, 105, 50))
'select region rect
croppedImage.Source = cb 'set image source to cropped

Please take the time to read the Microsoft help.

ketan Ram Patil 11-Aug-17 8:41am

yes its applicable for small image not a large image.. it croppedbitmap gives error. "Value doesn't fall with in range"

when m passing the my code Rect1 value

Dim bs As BitmapSource = New CroppedBitmap(TryCast(image1.Source, BitmapSource), New Int32Rect(rcFrom.X, rcFrom.Y, rcFrom.Width, rcFrom.Height))

Graeme_Grant 11-Aug-17 8:46am

How big is the image??

Graeme_Grant 11-Aug-17 8:57am

That may be your problem... There are limitations on how large the images can be... Have a read of this: What is the maximum resolution of C# .NET Bitmap? - Stack Overflow[^] and c# - BitmapImage Image Size Limit - Stack Overflow[^]

Graeme_Grant 11-Aug-17 8:58am

Quote: "dimensions 1920 pixels * 1280 pixels , 72 dpi ,bit depth 24 ,152 kb in JPEG format"

That should be no problem...

ketan Ram Patil 11-Aug-17 9:01am

it works for = dimensions 1920 pixels * 1280 pixels , 72 dpi ,bit depth 24 ,152 kb in JPEG format

cant work for this formate image = dimensions 2496 pixels * 3504 pixels , 300 dpi ,bit depth 24 ,152 kb in JPEG format

Graeme_Grant 11-Aug-17 9:04am

Which method are you using and what is the error message?

ketan Ram Patil 11-Aug-17 9:14am

https://stackoverflow.com/questions/39261580/image-cropping-in-c-values-does-not-fall-in-expected-range

same problem....

Graeme_Grant 11-Aug-17 9:45am

Okay, I know what your problem is most likely to be... a calculation error. I'll post a new solution below with working code...

Graeme_Grant 11-Aug-17 19:33pm

How did you go with solution 2 below?

Graeme_Grant 12-Aug-17 1:04am

What does all this mean? My solution helped you to get it to work???

ketan Ram Patil 12-Aug-17 1:23am

thanks for the code. code works perfectly for 96 dpi But
for 300 dpi it gives "value does not fall with in expected range"

Graeme_Grant 12-Aug-17 5:21am

post the 300 dpi image somewhere and share the url.I'll have a closer look at it.

ketan Ram Patil 16-Aug-17 2:14am

sorry for the late reply . https://drive.google.com/file/d/0B0Hbd1jJiwLFN3VtTUY1Nl9rUFk/view

Graeme_Grant 16-Aug-17 3:36am

All good. Strange that it worked for the original large test image... I guess that was just lucky!

The new image showed that the scale calculation was out and was grabbing the wrong part of the image above. Once I changed to pixels for CroppedBitmap(xxx) in the Go_Click method, the positioning was fixed! See the updated SOLUTION 2[^] below...

ketan Ram Patil 16-Aug-17 4:53am

You are a great... <3 <3
Thank you :) for your valuable reply..:)

n again thank you...... it works perfectly.

Graeme_Grant 16-Aug-17 5:33am

You are most welcome! :)

Graeme_Grant 16-Aug-17 5:51am

I don't normally mention this, but it is good etiquette to mark the question as answered, as you have mentioned above so that others who see this will know...

ketan Ram Patil 18-Aug-17 8:58am

i am hesitate to ask the question again.... sorry for that.
actually i am displaying the rectangle on image on crop button click and i want to adjust the rectangle at a runtime by user. after click ok button image will be crope. i am able to draw the rectangle on image but cant resize the rectangle by user define.
i don't having words to say u to help me. when you are free then replay. sorry again.

Graeme_Grant 18-Aug-17 9:16am

Sorry, not understanding.

ketan Ram Patil 18-Aug-17 11:21am

when user click on crop button then automatically crop rectangle display on image control. user can able to adjust rectangle height width. according to rectangle height and width image crop immediately on image control.at a run time.

Graeme_Grant 18-Aug-17 11:24am

Still not understanding... It is already doing that...

As this is answered, please start a new question.

ketan Ram Patil 18-Aug-17 11:31am

have you seen the hp printers software. after scan the image they provide crop functionality i want to do the same crop functionality ... i want to provide crop rectangle on image. :(

Graeme_Grant 18-Aug-17 11:50am

Do you want to resize the selection rectangle, not draw a new one? That is outside the scope of this question. You need to research grip handles that can be dragged.

I'm closing this off. Please research and ask new questions for more information, not add to this one.

ketan Ram Patil 18-Aug-17 11:58am

yes i want to resize the selection rectangle not to draw new one. ok.. i will search on grip handles thank you for your valuable replay.. :)

ketan Ram Patil 18-Aug-17 12:17pm

thanks again the grip handle word help me to search my problem finally i got the solution. thank you again..
you are gr8... :)

ketan Ram Patil 19-Aug-17 1:57am

i want ask you the question. How did you calculate the Go click. Crop maths.
which article i need to read for study.

Graeme_Grant 19-Aug-17 2:12am

No website... I used an excel spreadsheet and worked it out myself.

ketan Ram Patil 19-Aug-17 2:21am

ok .. :) gr8...
i am hesitate to tell you.
the same again value doses not fall with in expected range problem happen with me... :(
with new rectangle resize project.

shubh2895 18-Aug-17 3:14am

thanks for Crop code... it works....

please help

i am stuck on image brightness problem in wpf using slider control.

i tried to pass values to this function it gives error

"object reference not set to the instance of object"
Public Shared Function Brightness(ByVal image As Bitmap, ByVal SliderValue As Integer) As Bitmap

'DrawImage(image, GetBrightnessMatrix(percent))

Dim brtR As Single = CSng(SliderValue / 100)
Dim brtG As Single = CSng(SliderValue / 100)
Dim brtB As Single = CSng(SliderValue / 100)
Dim image_attr As New ImageAttributes
Dim cm As ColorMatrix = New ColorMatrix(New Single()() _
{ _
New Single() {brtR, 0.0, 0.0, 0.0, 0.0}, _
New Single() {0.0, brtG, 0.0, 0.0, 0.0}, _
New Single() {0.0, 0.0, brtB, 0.0, 0.0}, _
New Single() {0.0, 0.0, 0.0, 1.0, 0.0}, _
New Single() {0.0, 0.0, 0.0, 0.0, 1.0}})

Dim rect As Rectangle = _
Rectangle.Round(image.GetBounds(GraphicsUnit.Pixel))
Dim wid As Integer = image.Width
Dim hgt As Integer = image.Height

Dim img As New Bitmap(wid, hgt)
Dim gr As Graphics = Graphics.FromImage(img)

image_attr.SetColorMatrix(cm)
gr.DrawImage(image, rect, 0, 0, wid, _
hgt, GraphicsUnit.Pixel, image_attr)

Return img

End Function

Private Sub SliderBrightness_ValueChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles SliderBrightness.ValueChanged

If image1.Source IsNot Nothing Then

Dim i As Integer
i = SliderBrightness.Value
StackPanelImage.Source = ToBitmapImage(Brightness(bitmapimage, i))
End If
End Sub

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Accepted Answer · 2017-08-10T20:03:00

Solution 1

Microsoft WPF documents has a great example for you: How to: Crop an Image | Microsoft Docs[^]

Posted 10-Aug-17 20:03pm

Graeme_Grant

Graeme_Grant · Accepted Answer · 2017-08-11T03:55:00

Okay, it appears that you have a calculation error - one of the values may be double.NAN[^].

This code has the same problem and was not picked up by those that responded: c# - Crop Image using Canvas Rectangle - Stack Overflow[^]

The problem is with these calculations:

C#

rcFrom.X = (int)((rect1.X) * (image1.Source.Width) /(image1.Width));
rcFrom.Y = (int)((rect1.Y) *(image1.Source.Height) / (image1.Height));
rcFrom.Width = (int)((rect1.Width) * (image1.Source.Width) /(image1.Width));
rcFrom.Height = (int)((rect1.Height) * (image1.Source.Height) /(image1.Height));

Testing & debugging has shown that image1.Height and image1.Width are returning double.NAN properties. What they should be using is image1.ActualHeight and Actualimage1.Width properties.

Here is a corrected working version of the code (above link in this solution) working with an image size of 3840 x 2160 jpeg image:

XAML MainWindow:

XML

<Window
    x:Class="WpfCropImage.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    mc:Ignorable="d"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    Title="CodeProject Answer - WPF Scale & Crop Images"
    Height="600" Width="1200" WindowStartupLocation="CenterScreen">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid x:Name="Gridimage1">
            <Image Name="image1" Stretch="Uniform"
                   Source="http://eskipaper.com/images/cool-morning-fog-wallpaper-1.jpg"/>
            <Canvas  x:Name="BackPanel" 
                     Height="{Binding ElementName=image1, Path=ActualHeight}"
                     Width="{Binding ElementName=image1, Path=ActualWidth}">
                <Rectangle x:Name="selectionRectangle" 
                           Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
            </Canvas>
        </Grid>
        <Button Content=">>" Grid.Column="1" Name="Go" 
                Click="Go_Click" FontWeight="Bold" 
                VerticalAlignment="Center" Margin="10"/>

        <Image Grid.Column="2" Name="image2" Stretch="Uniform" />

    </Grid>
</Window>

And the MainWindow code-behind:
UPDATE Aug 16, 2017: The new sample image showed that the scaling calculation was incorrect. Below code has the correction.

C#

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace WpfCropImage
{
    public partial class MainWindow : Window
    {
        private bool isDragging;
        private Point anchorPoint = new Point();

        public MainWindow()
        {
            InitializeComponent();

            Gridimage1.MouseLeftButtonDown += new MouseButtonEventHandler(image1_MouseLeftButtonDown);
            Gridimage1.MouseMove += new MouseEventHandler(image1_MouseMove);
            Gridimage1.MouseLeftButtonUp += new MouseButtonEventHandler(image1_MouseLeftButtonUp);

            Go.IsEnabled = false;
            image2.Source = null;
        }

        private void Go_Click(object sender, RoutedEventArgs e)
        {
            if (image1.Source != null)
            {
                var rect1 = new Rect()
                {
                    X = Canvas.GetLeft(selectionRectangle),
                    Y = Canvas.GetTop(selectionRectangle),
                    Width = selectionRectangle.Width,
                    Height = selectionRectangle.Height
                };

                // calc scale in PIXEls for CroppedBitmap...
                var img = image1.Source as BitmapSource;
                var scaleWidth = (img.PixelWidth) / (image1.ActualWidth);
                var scaleHeight = (img.PixelHeight) / (image1.ActualHeight);

                var rcFrom = new Int32Rect()
                {
                    X = (int)(rect1.X * scaleWidth),
                    Y = (int)(rect1.Y * scaleHeight),
                    Width = (int)(rect1.Width * scaleWidth),
                    Height = (int)(rect1.Height * scaleHeight)
                };

                image2.Source = new CroppedBitmap(inputImage, rcFrom);
            }
        }
        #region "Mouse events"

        private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!isDragging)
            {
                anchorPoint.X = e.GetPosition(BackPanel).X;
                anchorPoint.Y = e.GetPosition(BackPanel).Y;
                isDragging = true;
            }

        }

        private void image1_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                double x = e.GetPosition(BackPanel).X;
                double y = e.GetPosition(BackPanel).Y;
                selectionRectangle.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));
                selectionRectangle.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));
                selectionRectangle.Width = Math.Abs(x - anchorPoint.X);
                selectionRectangle.Height = Math.Abs(y - anchorPoint.Y);

                if (selectionRectangle.Visibility != Visibility.Visible)
                    selectionRectangle.Visibility = Visibility.Visible;
            }
        }

        private void image1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isDragging)
            {
                isDragging = false;
                if (selectionRectangle.Width > 0)
                {
                    Go.Visibility = Visibility.Visible;
                    Go.IsEnabled = true;
                }
                if (selectionRectangle.Visibility != Visibility.Visible)
                    selectionRectangle.Visibility = Visibility.Visible;
            }
        }

        private void RestRect()
        {
            selectionRectangle.Visibility = Visibility.Collapsed;
            isDragging = false;
        }

        #endregion
    }
}