Member Avatar for kazekagerandy

how can i crop an image based on the size of my picturebox?

my picturebox's size mode is normal, i want to have for example, a 100 x 100 image using a 100 x 100 picture box, also i can drag the the image inside the picturebox so that i can have a focal point, a center of the image that i want to crop on.

thanks guys! itll be greatly appreciated.

  • 3 Contributors
  • 3 Replies
  • 471 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Jeff-Bennett

Dani AI

Generated

Brief answer: keep the full image in memory, render only the viewport-sized portion into the PictureBox (so the control becomes the 100x100 crop window), let the user drag to change the source offset, then copy (clone/draw) the visible rectangle into a new Bitmap. This implements ’s draggable-rectangle idea without a third-party control and builds on the example pointed to by giving a concrete VB.NET pattern.

The idea in plain steps:

  • Load the full image into a Bitmap variable (do not assign it to PictureBox.Image).
  • In PictureBox.Paint draw the source image at negative offsets so the PictureBox shows the selected area.
  • Handle MouseDown/Move/Up to update the offset while clamping to source image bounds.
  • When “Crop” is requested, use Bitmap.Clone or Graphics.DrawImage with the current offset and the PictureBox size to produce the final 100x100 image.

Example VB.NET (paste into a Form with PictureBox1 sized to your crop size and a btnCrop / PictureBox2 for result):

' form-level
Private srcBmp As Bitmap = Nothing
Private viewOffset As Point = New Point(0, 0)
Private dragging As Boolean = False
Private lastMouse As Point

Private Sub LoadSourceImage(path As String)
    If srcBmp IsNot Nothing Then srcBmp.Dispose()
    srcBmp = DirectCast(Bitmap.FromFile(path), Bitmap)
    PictureBox1.Image = Nothing
    PictureBox1.Invalidate()
End Sub

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
    If srcBmp Is Nothing Then Return
    viewOffset.X = Math.Max(0, Math.Min(viewOffset.X, srcBmp.Width - PictureBox1.Width))
    viewOffset.Y = Math.Max(0, Math.Min(viewOffset.Y, srcBmp.Height - PictureBox1.Height))
    e.Graphics.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
    e.Graphics.DrawImage(srcBmp, -viewOffset.X, -viewOffset.Y)
End Sub

Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseDown
    If e.Button <> MouseButtons.Left Then Return
    dragging = True
    lastMouse = e.Location
    PictureBox1.Cursor = Cursors.Hand
End Sub

Private Sub PictureBox1_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove
    If Not dragging OrElse srcBmp Is Nothing Then Return
    Dim dx = e.X - lastMouse.X, dy = e.Y - lastMouse.Y
    viewOffset.X -= dx : viewOffset.Y -= dy
    lastMouse = e.Location
    PictureBox1.Invalidate()
End Sub

Private Sub PictureBox1_MouseUp(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseUp
    dragging = False
    PictureBox1.Cursor = Cursors.Default
End Sub

Private Sub btnCrop_Click(sender As Object, e As EventArgs) Handles btnCrop.Click
    If srcBmp Is Nothing Then Return
    Dim cropRect As New Rectangle(viewOffset.X, viewOffset.Y, PictureBox1.Width, PictureBox1.Height)
    Dim cropped As Bitmap
    Try
        cropped = srcBmp.Clone(cropRect, srcBmp.PixelFormat)
    Catch
        cropped = New Bitmap(cropRect.Width, cropRect.Height)
        Using g = Graphics.FromImage(cropped)
            g.DrawImage(srcBmp, New Rectangle(0, 0, cropped.Width, cropped.Height), cropRect, GraphicsUnit.Pixel)
        End Using
    End Try
    If PictureBox2.Image IsNot Nothing Then PictureBox2.Image.Dispose()
    PictureBox2.Image = cropped
End Sub

Troubleshooting notes: keep PictureBox.SizeMode = Normal (or draw yourself as above). Clamp offsets so cropRect stays inside the source; if the source is smaller than the viewport decide whether to scale or pad. Dispose old Bitmaps to avoid leaks. If drawing flickers, enable double-buffering on the host control/form.

Recommended Answers

All 3 Replies

Member Avatar for Luc001

Hi,

You can find an example, here.

Member Avatar for kazekagerandy

where is the solution there? im sorry i didnt get what they meant there..

Member Avatar for Jeff-Bennett

I think what you need is to display the full image ( picturebox larger than 100x100 ) but then display a rectangle of size 100x100 on top of the picture and let the user drag this rectangle to specify the area to crop. Is that correct ?

Would it be ok to use a commercial .NET component rather than standard picturebox ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.