Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 561
Zulqurnain Jutt Avatar asked Aug 14 '16 06:08

Zulqurnain Jutt


People also ask

How do I add a frame to a photo in Canva?

At the bottom corner of the editor, tap the button. Tap the Elements tab. Use the search bar and enter “frame.” The frame options will load. Tap on a frame you want to use to apply it on the page.

How do you add a frame?

Adding a frameGo to m.facebook.com/profilepicframes. Tap Add a frame. Select the profile picture frame you would like to use. Tap Use as profile picture to save.


1 Answers

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

like image 75
nshmura Avatar answered Oct 14 '22 04:10

nshmura