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:
I am already using Libraries like picasso and EasyImage so if they can help?
Edit:
Test Frame example
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.
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.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With