Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Masking(crop) image in frame

Having a rich UI application in which I want to show image with complex shape like this

enter image description here

Now what I want is to crop my image as per Mask image, Actually image is coming dynamic and can be imported from Camera or Gallery(square or rectangle shape) and I want that image to fit in my layout frame like above

So just wondering that how do I have achieve this? Any idea /hint welcome

Background frame
enter image description here
Mask
enter image description here

Like this

like image 307
Mohammed Azharuddin Shaikh Avatar asked Sep 27 '12 05:09

Mohammed Azharuddin Shaikh


People also ask

How do I crop an image with a mask?

Click your image to select it. Hold SHIFT, and click a shape so that both the image and shape are selected. Click the masking tool found at the top properties bar. Double-click the masked image to resize or reposition the part of the image that shows in the shape or icon.

How do I mask an image?

Quick steps for creating a clipping mask: Select a text or graphic layer to fill with an image. Click Fill with image on the tool palette & choose an image. Select Edit image fill on the Text Tools panel. Adjust the image behind your text or shapes, then click Done.

How do I crop an image using binary mask?

use findContours or extract all mask points (manually) and use the minBoundingRect function. Afterwards use subimage to get the cropped image.

How do you mask an image in Piktochart?

All you have to do is select both the shape you are interested in and the photo while holding the SHIFT key. A small masking icon will appear. Click on it and voila!


1 Answers

Finally got the solution while changing mask image and using of Xfermode with Bitmap

Mask

enter image description here

 ImageView mImageView= (ImageView)findViewById(R.id.imageview_id);  Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.content_image);  Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask);  Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);  Canvas mCanvas = new Canvas(result);  Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));  mCanvas.drawBitmap(original, 0, 0, null);  mCanvas.drawBitmap(mask, 0, 0, paint);  paint.setXfermode(null);  mImageView.setImageBitmap(result);  mImageView.setScaleType(ScaleType.CENTER);  mImageView.setBackgroundResource(R.drawable.background_frame); 

see output

enter image description here

Source can be found here

like image 68
Mohammed Azharuddin Shaikh Avatar answered Oct 08 '22 19:10

Mohammed Azharuddin Shaikh