Search code examples
androidimagesurfaceviewandroid-custom-viewpicasso

How to Add Picture Frames to Image?


I am trying to achieve frames functionality , such that if i provide an image After Capturing/retrieving from Gallery ,i have done this part , now where i am stuck is How can i merge two images with respect to frame image accordingly!!

Now solution for combining two images is clearly given Here and Here

But they are not explaining the behaviour of adjusting one image with another such that in my case , Here are some examples:

image with frame1

image with frame2

I am already using Libraries like picasso and EasyImage so if they can help?

Edit:

Test Frame example test frame


Solution

  • I made example. Please refer this repository. https://github.com/nshmura/TestFrame/

    Frame class merges picture's bitmap and frame's bitmap.

    public class Frame {
    
        //filename of frame
        private String mFrameName;
    
        //Rect of picture area in frame
        private final Rect mPictureRect;
    
        //degree of rotation to fit picture and frame.
        private final float mRorate;
    
        public Frame(String frameName,int left, int top, int right, int bottom, float rorate) {
            mFrameName = frameName;
            mPictureRect = new Rect(left, top, right, bottom);
            mRorate = rorate;
        }
    
        public Bitmap mergeWith(Context context, Bitmap pictureBitmap) {
            Bitmap frameBitmap = AssetsUtil.getBitmapFromAsset(context, mFrameName);
    
            Bitmap.Config conf = Bitmap.Config.ARGB_8888;
            Bitmap bitmap = Bitmap.createBitmap(frameBitmap.getWidth(), frameBitmap.getHeight(), conf);
            Canvas canvas = new Canvas(bitmap);
    
            Matrix matrix = getMatrix(pictureBitmap);
            canvas.drawBitmap(pictureBitmap, matrix, null);
    
            canvas.drawBitmap(frameBitmap, 0, 0, null);
    
            return bitmap;
    
        }
    
        Matrix getMatrix(Bitmap pictureBitmap) {
            float widthRatio = mPictureRect.width() /  (float) pictureBitmap.getWidth();
            float heightRatio = mPictureRect.height() / (float) pictureBitmap.getHeight();
    
            float ratio;
    
            if (widthRatio > heightRatio) {
                ratio = widthRatio;
    
            } else {
                ratio = heightRatio;
            }
    
            float width = pictureBitmap.getWidth() * ratio;
            float height = pictureBitmap.getHeight() * ratio;
            float left = mPictureRect.left - (width - mPictureRect.width()) / 2f;
            float top = mPictureRect.top - (height - mPictureRect.height()) / 2f;
    
            Matrix matrix = new Matrix();
            matrix.postRotate(mRorate);
            matrix.postScale(ratio, ratio);
            matrix.postTranslate(left, top);
    
            return matrix;
        }
    }
    

    Use like this:

    //This is sample picture.
    //Please take picture form gallery or camera.
    Bitmap pictureBitmap = AssetsUtil.getBitmapFromAsset(this, "picture.jpg");
    
    //This is sample frame.
    // the number of left, top, right, bottom is the area to show picture.
    // last argument is degree of rotation to fit picture and frame.
    Frame frameA = new Frame("frame_a.png", 113, 93, 430, 409, 4);
    Bitmap mergedBitmap = frameA. mergeWith(this, pictureBitmap);
    
    //showing result bitmap
    ImageView imageView = (ImageView) findViewById(R.id.image);
    imageView.setImageBitmap(mergedBitmap);
    

    Result is below:

    enter image description here