Click here to Skip to main content
15,306,142 members
Articles / Programming Languages / Visual Basic
Article
Posted 17 Jun 2008

Stats

236.3K views
15.2K downloads
44 bookmarked

Image Cropping with Image Resizing Using VB.NET

Rate me:
Please Sign up or sign in to vote.
4.56/5 (44 votes)
17 Jun 2008CPOL2 min read
Simple Image Cropping with Image Resizing Using VB.NET

image_croppingVBNet/mainimg.jpg

Introduction

This article discusses simple image cropping with image resizing using VB.NET for developers.

Background

I wondered once upon a time about image cropping. I learned and understand that there are many simple image cropping techniques available compared to other cropping technology currently available.

Using the Code

This article discusses simple image cropping using VB.NET.

In this article, I discuss simple image cropping by using the common events like mouse move, mouse down, mouse up and button Click events.

I would like to discuss image cropping using five steps only. You need to follow these steps only.

The steps are as listed below:

  1. Load the image
  2. Crop the image
  3. Capture the image
  4. Resize the image (if you need)
  5. Save the image

Before we start creating, we need 2 picture box controls (PreviewPictureBox, crobPictureBox), 3 buttons (save, Cancel, open), 1 trackbar (resizingTrackBar) and some labels. Hey, this seems like cooking specifications.

The steps are briefly described below:

1. Load the Image

The image can load to the picture box using file open dialog box and be made to show by means of bitmap display method, i.e.:

VB.NET
openDlg.ShowDialog()  
PreviewPictureBox.Image = System.Drawing.Bitmap.FromFile(openDlg.FileName)
crobPictureBox.Image = System.Drawing.Bitmap.FromFile(openDlg.FileName)    
'*********PreviewPictureBox and crobPictureBox are 
'the cropping and previewing pictureboxes  

This can done either in form load or Button click events.

2. Crop the Image

The image can crop from the picture box using mouse move and mouse down events. This is possible by getting the x and y axis using the above events, i.e.:

VB.NET
cropX = e.X
cropY = e.Y
cropPen = New Pen(cropPenColor, cropPenSize)    
cropPen.DashStyle = DashStyle.DashDotDot          
'*************You have to create Colors(cropPenColor) 
'and Size(cropPenSize) to draw the doted lines  

You can see the styles that I applied to specify the selected area by DashStyle.DashDotDot. And also by crobPictureBox.CreateGraphics.DrawRectangle(cropPen, cropX, cropY, cropWidth, cropHeight).

3. Capture the Image

The image is captured only by using mouse up event, and the cropped image is set to Bitmap class which makes a image and sets the created image for preview, i.e.:

VB.NET
Dim bit As Bitmap = New Bitmap(crobPictureBox.Image, _
	crobPictureBox.Width, crobPictureBox.Height)
g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel)
PreviewPictureBox.Image = cropBitmap    

4. Resize the Image

If you want to resize the image, you can use the trackbar to resize the image. I prescribe use of a high quality image for resizing which results in quality cropped and resized images.

VB.NET
scale_factor = Integer.Parse(resizingTrackBar.Value)         
img1.Image = cropBitmap
bm_source = New 
Bitmap(img1.Image)  bm_dest = New Bitmap( _
CInt(bm_source.Width * scale_factor), _
Int(bm_source.Height * scale_factor))   
      
Dim gr_dest As Graphics = Graphics.FromImage(bm_dest)
gr_dest.DrawImage(bm_source, 0, 0, bm_dest.Width + i, bm_dest.Height + i)
PreviewPictureBox.Image = bm_dest
'*************Image resizing is done by means of getting the values from trackbar  

5. Save the Image

The cropped image may be a low quality one which leads to image distortion. I tried my level best to make the image with good quality. I used SmoothingMode, CompositingQuality, InterpolationMode and EncoderParameter(myEncoder, 60L) properties to make the images.

Points of Interest

In the above steps and coding methodology, you find simplicity. This is what I meant to do. All coders should use simple technique in an optimized manner for complicated issues.

History

  • 17th June, 2008: Initial post

License

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

Share

About the Author

Senthil Sambandam
Technical Lead
India India
No Biography provided

Comments and Discussions

 
GeneralReq for Poly shape Pin
naraimha27-Dec-09 22:50
Membernaraimha27-Dec-09 22:50 
Questionhow to convert bmp image to hexa conversion ??? Pin
JC.KaNNaN29-Sep-09 21:07
MemberJC.KaNNaN29-Sep-09 21:07 
GeneralMy vote of 2 Pin
Job V7-Sep-09 22:17
MemberJob V7-Sep-09 22:17 
GeneralCropping Images Pin
nace2k216-Jun-09 21:37
Membernace2k216-Jun-09 21:37 
GeneralRe: Cropping Images Pin
inzamamkhan5-Jan-11 19:37
Memberinzamamkhan5-Jan-11 19:37 
GeneralImage Cropping with Image Resizing Using vb.net Pin
hdogan11-Dec-08 2:59
Memberhdogan11-Dec-08 2:59 
GeneralRe: Image Cropping with Image Resizing Using vb.net Pin
Senthil S26-Dec-08 8:02
MemberSenthil S26-Dec-08 8:02 
GeneralFix for crop from working from only top left Pin
Shane Stewart13-Sep-08 21:31
MemberShane Stewart13-Sep-08 21:31 
The original code requires that the cropping rectangle must start at the top left of the box. The following code fixes that limitation.

The code keeps track of the starting coordinates in the CropX and CropY variables. I added absolute widths and heights based on the ending coordinates.

I put my changes in bold.

Private Sub crobPictureBox_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles crobPictureBox.MouseMove
        Try

            If crobPictureBox.Image Is Nothing Then Exit Sub

            If e.Button = Windows.Forms.MouseButtons.Left Then
                Dim l_X As Integer = e.X
                Dim l_Y As Integer = e.Y
                crobPictureBox.Refresh()
                cropWidth = Math.Abs(l_X - cropX)
                cropHeight = Math.Abs(l_Y - cropY)
                If cropX < l_X Then l_X = cropX
                If cropY < l_Y Then l_Y = cropY
                crobPictureBox.CreateGraphics.DrawRectangle(cropPen, l_X, l_Y, cropWidth, cropHeight)
                'crobPictureBox.CreateGraphics.DrawRectangle(cropPen, cropX, cropY, cropWidth, cropHeight)
            End If
            ' GC.Collect()

        Catch exc As Exception

            If Err.Number = 5 Then Exit Sub
        End Try

    End Sub


When you let go of the mouse, the ending coordinates are compared to the starting coordinates. If the coordinate(s) are less, modify the starting rectangle accordingly.

    Private Sub crobPictureBox_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles crobPictureBox.MouseUp
        Try
            Cursor = Cursors.Default
            Try
                If e.Button = Windows.Forms.MouseButtons.Left Then
                    If cropWidth < 1 Then Exit Sub
                    Dim l_X As Integer = e.X
                    Dim l_Y As Integer = e.Y
                    If cropX < l_X Then l_X = cropX
                    If cropY < l_Y Then l_Y = cropY

                    Dim rect As Rectangle = New Rectangle(l_X, l_Y, cropWidth, cropHeight)
                    'Dim rect As Rectangle = New Rectangle(cropX, cropY, cropWidth, cropHeight)
                    Dim bit As Bitmap = New Bitmap(crobPictureBox.Image, crobPictureBox.Width, crobPictureBox.Height)

                    cropBitmap = New Bitmap(cropWidth, cropHeight)
                    Dim g As Graphics = Graphics.FromImage(cropBitmap)
                    g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
                    g.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighQuality
                    g.CompositingQuality = Drawing2D.CompositingQuality.HighQuality
                    g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel)
                    PreviewPictureBox.Image = cropBitmap
                End If
            Catch exc As Exception
            End Try
        Catch exc As Exception
        End Try
    End Sub

Questionratio cropping Pin
TylerRowsell7-Sep-08 10:58
MemberTylerRowsell7-Sep-08 10:58 
AnswerRe: ratio cropping Pin
thirstyDev20-Nov-08 17:55
MemberthirstyDev20-Nov-08 17:55 
QuestionCrop only from left top to right bottom? Pin
Demaker2-Jul-08 1:10
MemberDemaker2-Jul-08 1:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.