I'm trying to crop a bitmap. I first scale the original bitmap down to fit inside a view, then I draw a rectangle on the view that the user can move around and scale to crop the image, much like you can do in instagram when you import a picture from your gallery. The problem I'm having is scaling the rectangle up to match the original bitmap scale to crop from. Here is what's happening:
The middle of the square is what the final result should be
And what we actually get back:
I know it's just math but I spent hours last night trying to get it figured out.. What am I doing wrong?
Bitmap bmp;
float scalefactor = (float)this.mOriginalBitmap.getWidth() / (float)this.mBmpScaledForView.getWidth();
float dh = (this.mCropBoxRect.right - this.mCropBoxRect.left) * (scalefactor-1f);
float dv = (this.mCropBoxRect.bottom - this.mCropBoxRect.top) * (scalefactor-1f);
float l = (float)this.mCropBoxRect.left + dh/2f;
float r = (float)this.mCropBoxRect.right + dh/2f;
float t = (float)this.mCropBoxRect.top + dv/2f;
float b = (float)this.mCropBoxRect.bottom + dv/2f;
RectF scaleRec = new RectF(l, t, r, b);
bmp = Bitmap.createBitmap(this.mOriginalBitmap, (int)scaleRec.left, (int)scaleRec.top, (int)scaleRec.width(), (int)scaleRec.height());
bmp = Bitmap.createScaledBitmap(bmp, MyConsts.outputSize, MyConsts.outputSize, false);
I was able to get it to work by using a matrix. The answer is pretty simple, it was just arriving there what was difficult for me.
Bitmap bmp;
//Get the scale factors for both vertical and horizontal since we're dealing with a square inside of a rectangle
float scalefactorH = (float)mOriginalBitmap.getWidth() / (float)mBmpScaledForView.getWidth();
float scalefactorV = (float)mOriginalBitmap.getHeight() / (float)mBmpScaledForView.getHeight();
//Create a matrix and apply the scale factors
Matrix m = new Matrix();
m.postScale(scalefactorH, scalefactorV);
//Apply the matrix to a RectF
RectF crop = new RectF(mCropBoxRect);
m.mapRect(crop);
//And finally hit the bitmap with this diddy
bmp = Bitmap.createBitmap(this.mOriginalBitmap, (int)crop.left - mOffsetX, (int)crop.top - mOffsetY, (int)crop.width() - mOffsetX, (int)crop.height() - mOffsetY);
Related
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
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:
So, I'm using this library https://github.com/thuytrinh/android-collage-views to add "MultiTouchListener" feature to my ImageView. Basically I let user to modify a photo to his needs using rotation, scale and translation. Now the only problem is how to save it. I did it like this:
Bitmap bitmap = Bitmap.createBitmap(imageContainer.getWidth(), imageContainer.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.WHITE);
imageContainer.draw(canvas);
It works, but image is not big enough - it's as big as view on phone so it depends on screen resolution. And I want to "apply" these transformations on given bitmap with full size. And I want transformed image to look like on screen (so it'll need to crop everything out of screen)
I tried the following:
Bitmap newBitmap = Bitmap.createBitmap(image.getWidth(), image.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(image, imageView.getMatrix(), paint);
But it doesn't look as expected.
User screen:
And output image (without cropping, because I don't want which side I should crop):
How can I fix this? Is there any solution?
Here is one way to do it, definitely not perfect but should give you a good start :
In this, container refers to the view that contains the transformed ImageView, the phone case on your screenshot and src the raw source bitmap.
First, you need to compute the desired width and height of the output bitmap, i.e the size it would be to make the image fit in it while keeping the ratio of the container :
float containerWidth = containerView.getWidth();
float containerHeight = containerView.getHeight();
float srcWidth = src.getWidth();
float srcHeight = src.getHeight();
float containerRatio = containerWidth / containerHeight;
float srcRatio = srcWidth / srcHeight;
float outputWidth, outputHeight;
if(srcRatio > containerRatio) { //fits in width
outputWidth = srcWidth;
outputHeight = srcWidth / containerRatio;
}
else if(srcRatio < containerRatio) { //fits in height
outputHeight = srcHeight;
outputWidth = srcHeight * containerRatio;
}
else {
outputWidth = srcWidth;
outputHeight = srcHeight;
}
Apply the ratio between container width/height and output width/height to the translation part of the matrix that hold the transformation that the user did
float containerToOutputRatioWidth = outputWidth / containerWidth;
float containerToOutputRatioHeight = outputHeight / containerHeight;
float[] values = new float[9];
transformedImageView.getMatrix().getValues(values);
values[2] = values[2] * containerToOutputRatioWidth;
values[5] = values[5] * containerToOutputRatioHeight;
Matrix outputMatrix = new Matrix();
outputMatrix.setValues(values);
Draw the output bitmap as you were doing with the correct size (outputWidth, outputHeight) and matrix (outputMatrix).
Bitmap newBitmap = Bitmap.createBitmap(Math.round(outputWidth), Math.round(outputHeight), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(src, outputMatrix, paint);
.
Warnings
You should be careful about memory allocation, this code will lead to allocate some massive bitmaps, you should implement some kind of limit that get along with your needs. (Also do allocation and drawing in background)
You might need to do some adjustment depending on where you place the image in the first place.
Here is my issue, I display in a ListView some Pictures come from web.
I would like to display in my ImageView only a specific area to my picture, without resizing it.
Here is a concret example :
https://docs.google.com/file/d/0B6J9AVdWXjwuWld5dU5CWXFSTjQ/edit?usp=sharing
I think it's possible with a Bitmap method, but I really don't know how to do this...
Thanks for your tips
Yes, the way to do this is to create a Bitmap object out of your source image. Here's an example:
File thumbFile = new File(thumbFileDir, imageName);
//Bitmap source = your image
Bitmap target= Bitmap.createBitmap(thumbSize, thumbSize,Config.ARGB_8888); //in my case the thumb image is square, use your dimensions instead of "thumbSize, thumbSize"
Canvas canvas = new Canvas(target);
float hScale = thumbSize/(float)source.getWidth(); //again, thumb dimensions here
float vScale = thumbSize/(float)source.getHeight(); //and here
float scale = Math.max(hScale, vScale);
Matrix matrix = new Matrix();
matrix.setScale(scale, scale);
matrix.postTranslate(thumbSize/2 - source.getWidth()/2 * scale, thumbSize/2 - source.getHeight()/2 * scale); //and here
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(source, matrix, new Paint());
The "target" object is what you are asking for
Simple question where the simple answer isn't working. I have a bitmap and I want to get its dimensions as scaled to the display by the system for different DPI screens within the onDraw() method. bitmap.width() returns its unscaled width successfully. However, bitmap.getScaledWidth() returns zero. I have tried getScaledWidth(canvas) and getScaledWidth(canvas.getDensity()), but both return 0. Indeed, canvas.getDensity() returns zero so I can't even calculate it manually.
What am I doing wrong?
Bit more detail. I'm using a custom view. The bitmap is declared in the class and loaded in the constructor.
Edit:
I've found that using:
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
bitmap.getScaledHeight(metrics) returns the same value as bitmap.getHeight().
It would appear that bitmap.getWidth() returns the dimension of the resident bitmap after it has been scaled, meaning there's no apparent way to get the bitmap's original width.
The Canvas class has a lots of overloads for the drawBitmap() function. One of them allows you to scale/cut a Bitmap through a pretty comfortable interface.
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)
Where
Bitmap bitmap - is your bitmap you want to draw
Rect src - the source rect from your bitmap. If its not null, it will
cut out a piece from your bitmap (in the size and position of src)
RectF dst - This Rect will represent the Rectangle, your Bitmap will
fit in.
Paint paint - optional paint
And now an example! Lets say, you want to shrink your Bitmaps width to 1/2 and increase its height to 2 times of the original:
float startX = 0; //the left
float startY = 0; //and top corner (place it wherever you want)
float endX = startX + bitmap.getWidth() * 0.5f; //right
float endY = startY + bitmap.getHeight() * 2.0f; //and bottom corner
canvas.drawBitmap(bitmap, null, new RectF(startX, startY, endX, endY), null);
UPDATE
I don't really understand, what you are trying to acomplish, after reading your comment, but here is some extra info to get started:
Get the original size of a Bitmap without loading it into the memory:
BitmapFactory.Options options = new BitmapFactory.Options();
bitmapOptions.inJustDecodeBounds = true; // bitmap wont be loaded into the memory
//won't load the Bitmap, but the options will contain the required information.
BitmapFactory.decodeStream(inputStream, null, options);
/*or*/ BitmapFactory.decodeFile(pathName, options);
int originalWidth = bitmapOptions.outWidth;
int originalHeight = bitmapOptions.outHeight;
Now if you have another your actual (scaled) Bitmap, or an ImageView, what you want to compare to the original, then you can use this (to get the width and height use getWidth() and getHeight()):
/*Get these values*/
int originalWidth, originalHeight, scaledWidth, scaledHeight;
float scaleWidthRatio = (float)scaledWidth / originalWidth;
float scaleHeightRatio = (float)scaledHeight / originalHeight;
How about this? You scale the bitmap yourself. :-)
protected void onDraw(Canvas canvas) {
//super.onDraw(canvas);
Drawable drawable = getDrawable();
if(drawable==null)
Log.d("onDraw()","getDrawable returns null");
Bitmap fullSizeBitmap,scaledBitmap = null,roundBitmap = null;
fullSizeBitmap = ((BitmapDrawable)drawable).getBitmap() ;
//get width & height of ImageView
int scaledWidth = getMeasuredWidth();
int scaledHeight = getMeasuredHeight();
//bitmap, which will receive the reference to a bitmap scaled to the bounds of the ImageView.
if(fullSizeBitmap!=null)
scaledBitmap= getScaledBitmap(fullSizeBitmap,scaledWidth,scaledHeight);
//Now, draw the bitmap on the canvas
if(roundBitmap!=null)
canvas.drawBitmap(roundBitmap, 0,0 , null);
}
For my application, i have used pinch zoom feature by adapting from the tutorial and creating a custom view http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2-part-6-implementing-the-pinch-zoom-gesture/1847
Right now i'm working on capturing the zoomed image as bitmap.
Partially I was able to get the bitmap by making use of
setDrawingCacheEnabled(true);
Bitmap bm = Bitmap.createBitmap(finalView.getDrawingCache());
setDrawingCacheEnabled(false);
Using this approach, I'm getting both the zoomed image and the screen background.
Is there any way to capture only the zoomed image as a bitmap?
Try
setDrawingCacheEnabled(false)
finalView.setDrawingCacheEnabled(true);
Bitmap bm = Bitmap.createBitmap(finalView.getDrawingCache());
finalView.setDrawingCacheEnabled(false);
After having searched a lot, I found a 'Temporary' solution in the same Community & also thanks for the code from 'weakwire' provided in the same post.
Getting coordinates and width/height from a matrix
Idea is simple, all i have do is remove the background screen from the scaled image by cropping. Code is bit lengthy, but worked for me.
First get the Original Bitmap size
float imgWidth = imgBitmap.getWidth()
float imgHeight = imgBitmap.getHeight()
Obtain the matrix ( pinch zoom feature used in my application uses matrix 'trick') values, used to scale the image and get the scaledWidth & scaledHeight of the original image.
float[] values = new float[9];
matrix.getValues(values);
float globalX = values[2];
float globalY = values[5];
float scaledWidth = values[0]*imgWidth;
float scaledHeight = values[4]*imgHeight;
// If zoomed Image gets out of screen, I'm trying to crop the image available in the screen by considering image from (0,0)
if(globalX<0)
globalX = 0;
if(globalY<0)
globalY = 0;
Finally capture the View and crop the background
In my case ("finalView" is the custom View name, where pinch zooming happens)
setDrawingCacheEnabled(false);
destroyDrawingCache();
finalView.setDrawingCacheEnabled(true);
Bitmap bm = Bitmap.createBitmap(finalView.getDrawingCache());
finalView.setDrawingCacheEnabled(false);
//Final Image Width & Height
int finalWidth = Math.min((int)width,(int)finalView.getWidth());
int finalHeight = Math.min((int)height,(int)finalView.getHeight());
// crop to get the scaled image
Bitmap finalBitmap = Bitmap.createBitmap(bm, (int)globalX, (int)globalY, finalWidth ,finalHeight);
Though this is a temporary solution, it works for me. If there is any alternate solution, please post it.
This original answer here, just replace the setting background part. Hopefully it helps
public static Bitmap getBitmapFromView(View view) {
if (view == null) return null;
//Define a bitmap with the same size as the view
Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
//Bind a canvas to it
Canvas canvas = new Canvas(returnedBitmap);
// draw white background on the canvas
canvas.drawColor(Color.WHITE);
// draw the view on the canvas
view.draw(canvas);
//return the bitmap
return returnedBitmap;
}