Masking(crop) image in frame

Question

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

Like this

Can this be done efficiently on GPU with renderscript? – zeitgeist May 13 '22 at 06:35 — zeitgeist, May 13 '22 at 06:35

Mohammed Azharuddin Shaikh · Accepted Answer · 2012-10-29T05:42:47.260

148

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

edited Oct 29 '12 at 05:42

answered Sep 28 '12 at 09:14

Mohammed Azharuddin Shaikh

41,633
14
96
115

1

hello @hotveryspicy,thanks for example code,it helped a lot. I am facing some problem,some little hint will go long way for me. I want to cut the bitmap in some polygon shape drawn. My bitmap cuts in polygon shape but the content of cropped bitmap is taken from the top left i.e. 0,0 of original bitmap. And I want the content below where the polygon is drawn. – Dory Apr 25 '13 at 13:42
@Nidhi you can create scaled bitmap for the same. – Mohammed Azharuddin Shaikh Apr 26 '13 at 04:31
@hotveryspicy thankyou for the reply. Actually I want to do same thing given in here. http://stackoverflow.com/questions/15969028/crop-image-by-polygon-area?rq=1. My problem is cropped bitmap is crop from top left i.e 0,0. Not form the path which i specified. I have also put code. Please guide me where i am going wrong. – Dory Apr 26 '13 at 05:36
thanks @hotveryspicy, for anyone that need it, I made a simple fork that can help scale the image to the mask's size: https://github.com/worker8/MaskImage/tree/master – I'm a frog dragon Sep 12 '13 at 06:48
1

To scale the mask to fit the image, i use this line: Bitmap resized = Bitmap.createScaledBitmap(mask, original.getWidth(), original.getHeight(), true); And the use the mCanvas.drawBitmap(original, 0, 0, null); mCanvas.drawBitmap(resized, 0, 0, paint); – Miguel Dec 21 '13 at 09:24
@hotveryspicy very thanks for the code. I want to know how to do this (image masking) with animation. – maddy d Apr 16 '14 at 11:03
Does this cause OOM? – zionpi Jan 27 '16 at 10:28
Selected bitmap is not scaled to imageview's height and width – Rushi M Thakker Sep 18 '17 at 08:54
I am using same code but unable to focus on object in image please help – vikrant arankalle Nov 18 '17 at 06:54
@AzharShaikh how can i do this with camera? – jake oliver Jul 24 '18 at 06:22
@AzharShaikh I want masking for multiple images in single layout – Ashish Kakadiya Aug 22 '19 at 11:41

score 7 · Answer 2 · answered Aug 25 '16 at 05:45

It's even easier using the Picasso library and a custom Transformation:

MaskTransformation.java:

 * ORIGINAL:
 * Copyright (C) 2015 Wasabeef
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package me.monori.example.utilities;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;

import com.squareup.picasso.Transformation;

public class MaskTransformation implements Transformation {

    private static Paint mMaskingPaint = new Paint();
    private Context mContext;
    private int mMaskId;

    static {
        mMaskingPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    }

    /**
     * @param maskId If you change the mask file, please also rename the mask file, or Glide will get
     * the cache with the old mask. Because getId() return the same values if using the
     * same make file name. If you have a good idea please tell us, thanks.
     */
    public MaskTransformation(Context context, int maskId) {
        mContext = context.getApplicationContext();
        mMaskId = maskId;
    }

    @Override public Bitmap transform(Bitmap source) {
        int width = source.getWidth();
        int height = source.getHeight();

        Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Drawable mask = getMaskDrawable(mContext, mMaskId);

        Canvas canvas = new Canvas(result);
        mask.setBounds(0, 0, width, height);
        mask.draw(canvas);
        canvas.drawBitmap(source, 0, 0, mMaskingPaint);

        source.recycle();

        return result;
    }

    @Override public String key() {
        return "MaskTransformation(maskId=" + mContext.getResources().getResourceEntryName(mMaskId)
                + ")";
    }

    public Drawable getMaskDrawable(Context context, int maskId) {
        Drawable drawable = ContextCompat.getDrawable(context, maskId);

        if (drawable == null) {
            throw new IllegalArgumentException("maskId is invalid");
        }

        return drawable;
    }
}

Then simply defining it in a line:

Picasso.with(context)
                    .load(imageUrl)
                    .transform(new MaskTransformation(context, _maskDrawableId))
                    .placeholder(R.drawable.drawableId)
                    .into(imageView);

score 1 · Answer 3 · answered Jan 28 '15 at 10:37

     final ImageView mImageView = (ImageView) findViewById(R.id.image);
     mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);


     mImageView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {


            if(b){
                 mImageView.setBackgroundResource(R.drawable.profil_circle);

                 Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.doge);

                 Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask_white);

                 Bitmap mask1 = BitmapFactory.decodeResource(getResources(),R.drawable.pencil_bg);

                 original = Bitmap.createScaledBitmap(original, mask.getWidth(),mask.getHeight(), true);

                 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);
                 mCanvas.drawBitmap(mask1, 0, 0, null);
                 Bitmap mask2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_pencil);
                 mCanvas.drawBitmap(mask2, 0, 0, null);
                 mImageView.setImageBitmap(result);
                 mImageView.setScaleType(ScaleType.FIT_XY);

                 b=false;
             }else{
                 ImageView mImageView = (ImageView) findViewById(R.id.image);
                 Bitmap original = BitmapFactory.decodeResource(getResources(),
                 R.drawable.doge);

                 Bitmap mask = BitmapFactory.decodeResource(getResources(),
                 R.drawable.mask_white);

                 original = Bitmap.createScaledBitmap(original, mask.getWidth(),
                 mask.getHeight(), true);

                 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.FIT_XY);
                // mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);
                 b= true;


             }


        }
    });

score 0 · Answer 4 · answered May 24 '20 at 07:16

This example masks his child element (Imageview) with the mask "animation_mask"

<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
android:id="@+id/frm_mask_animated"
android:layout_width="100dp"
app:porterduffxfermode="DST_IN"
app:mask="@drawable/animation_mask"
android:layout_height="100dp">

<ImageView android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="centerCrop"
           android:src="@drawable/unicorn"/>

check this git link

Masking(crop) image in frame

4 Answers4

Linked