0

I'm trying to make a page of cropping profile picture. I have a crop frame which you can drag along. The image is transparent, or blurred, but within the frame, it is clear. The area within the frame will be your profile picture. I know how to set alpha, but I haven't come up with a way to set alpha within the crop frame. So this is the effect I want:

photo cropping

Any help would be great. Thanks!

Li Yinghao
  • 33
  • 5

1 Answers1

0

You should probably think about having two ImageViews. One rectangular for the blurred photo and one circular placed on top of the first one for the crop preview.

When user selects a photo, you would create the blurred copy. It seems you already know how to move the photo within the ImageWiew, and so doing couple of calculations with the widths and heights of the ImageViews and the photo, should give you the correct positioning of the photos in both of the ImageViews to make them align.

Lastly when dragging on either of the ImageViews, adjust the position of the photo in both ImageViews.

If you want a different approach, using OpenGL ES, you might be able to achieve realtime blurring outside of the circle with a pixel shader Shader for Android OpenGL ES. Possibly a more elegant solution, but probably not as simple.

I'm not exactly sure if you want blurring or transparency, but the solution will be very similar.

IsawU
  • 430
  • 3
  • 12