Crop a Camera Image

Questions
1

Is there a way to crop a camera image? Specifying width and height seem to resize it. I’d like to crop to a square. It would be nice if the cameraSource could also show as a square. Thanks.

2

Not really any simple way to crop an image in code. Try creating an image() of your crop’s dimensions, calling setContext() with it, spriting the camera into its middle, and restoring drawing to the screen by calling setContext() with no parameters.

3

@DaveW Maybe this will give you an idea.

EDIT: Made changes to allow the crop area to be resized by moving your finger. Double to to switch between resizing the crop area and moving the crop area. Tap “Save image” to capture the image.


displayMode(FULLSCREEN)

function setup()
    img=nil
    rectMode(CENTER)
    spriteMode(CENTER)
    cameraSource(CAMERA_BACK)
    mov=false
    x1=300
    y1=300   
    dx=100
    dy=100
end

function draw()
    background(40, 40, 50)
    if img==nil then
        img=image(CAMERA)
    else
        iw=img.width
        ih=img.height
        sprite(img,iw/2,ih/2)       
    end
    if mov then
        stroke(255,0,0)
        str="Double tap to resize crop area"
    else
        stroke(255)
        str="Double tap to move crop area"
    end       
    noFill()
    strokeWidth(2)
    rect(x1,y1,dx,dy)
    stroke(255)
    rect(WIDTH/2,HEIGHT-100,100,50)
    fill(255)
    text("Save image",WIDTH/2,HEIGHT-100)
    text(str,WIDTH/2,HEIGHT-50)
    if img2~=nil then
        sprite(img2,sx,sy)
    end
end

function touched(t)
    if t.state==BEGAN then
        if t.x>WIDTH/2-50 and t.x<WIDTH/2+50 and
            t.y>HEIGHT-125 and t.y<HEIGHT-75 then
            img2=img:copy(x1-dx/2,y1-dy/2,dx,dy)
            sx=dx/2
            sy=HEIGHT-dy/2
        end
    end
    if t.state==BEGAN and t.tapCount==2 then
        mov=not mov
    end
    if t.state==MOVING and not mov then
        dx=math.abs(dx+t.deltaX)
        dy=math.abs(dy+t.deltaY)
    end
    if mov then
        x1=x1+t.deltaX
        y1=y1+t.deltaY
    end
end
4

@dave1707 Wow! That’s getting me much closer. Two things:

  1. Could this work when the captured image is resized to less than full screen? The frame looks at the full screen.
  2. Is there a way to make the inside of the frame transparent so the underlying photo can be seen as the frame is moved?
    Thanks a bunch.
5

@DaveW This was just a quick example to show you that cropping can be done. This can be changed to work with any sized image and changed to resize the crop area. As for making the inside transparent, that depends on what you want to do. Are you cutting multiple images out of a single image or will you just capture one image. The inside could be cleared after you save the captured image, so that basically makes it transparent. How this gets changed is up to you, but I’m sure no matter what you want to do, it can be done.

6

@DaveW I made changes to the above code. You can resize or move the crop area by moving your finger around the screen. Double tap the screen to toggle between resizing the crop area or moving the crop area. Tap “Save image” to capture what’s in the crop area. The rectangle will be red when the crop area can be moved around, white for resize.

7

@dave1707, This seems to work perfectly! Thanks a bunch!