my goal is to create an app that allows users to take a picture with the camera and then add some images on it just like "face in hole" but reversed.
I'm already capable of showing the camera preview while display a imageview, but when i take the picture it has a different resolution so the bitmap over the photo is misplaced.
I've wrote this code but it isn't very accurate:
canvas.drawBitmap(cameraBitmap, 0f, 0f, null); //drawing the picture just taken on the canvas
float posx, posy, newx,newy;
RectF r = new RectF();
i.getImageMatrix().mapRect(r); // i is the imageview of the bitmap
posx= r.left;
posy= r.top;
newx=(posx*newImage.getWidth())/screenWidth;
newy = (posy*newImage.getHeight())/screenHeight;
canvas.drawBitmap( ((BitmapDrawable)i.getDrawable()).getBitmap(),newx,newy,null);
My question is: there's a better and more accurate way to place a bitmap on the picture with the new resolution keeping bitmap scale and rotation info?
Thanks in advance.
Related
I am trying to further process a Camera2 image. Because the cameras in devices have different rotations and flipped based on back and front camera, I use transforms to properly rotate it.
transformationMatrix is that matrix for the front camera that has 270 rotation.
Then from that transformed camera image, I want to copy a scrolling window to another bitmap. I want to retain that bitmap/state and draw a line before drawing finalBitmapWithScanner on the phone screen.
Is there a way to do this more efficiently and fast? The second line takes 200ms to complete which is the main issue here.
Canvas canvas = new Canvas(tempBitmap);
canvas.drawBitmap(cameraBitmap, transformationMatrix, paint); // <= 200ms
Rect src = new Rect((int) lastXPos, 0, (int) mXPos, mViewHeight);
Canvas canvas2 = new Canvas(finalBitmap);
canvas2.drawBitmap(tempBitmap, src, src, paint);
Canvas canvas3 = new Canvas(finalBitmapWithScanner);
canvas3.drawBitmap(finalBitmap, 0, 0, paint);
canvas3.drawLine(mXPos, 0, mXPos, mViewHeight/2, scrollerPaint);
transformationMatrix.reset();
transformationMatrix.setRotate(270, imageHeight, 0);
transformationMatrix.postTranslate(-imageHeight, 0);
transformationMatrix.postScale(scaleFactor, scaleFactor);
transformationMatrix.postScale(-1f, 1f, mViewWidth / 2f, mViewHeight / 2f);
There are bunch of ways you can try to achieve fast rendering:
You can pass parameters "paint" an null.
also you can use function CreateScaledBitmap and notice you have to set scale and size before rendering as see in below:
As you can see in documentation enter link description here; you have to resize and rescale your bitmap before rendering so you can use code below for your BitmapFactory.Options :
mBitmapOptions.inScaled = true;
mBitmapOptions.inDensity = srcWidth;
mBitmapOptions.inTargetDensity = dstWidth;
// will load & resize the image to be 1/inSampleSize dimensions
mCurrentBitmap = BitmapFactory.decodeResources(getResources(),
mImageIDs, mBitmapOptions);
use canvas.restore() after draw func.
I have an image in drawable folder for clock hand. I want to rotate it in fixed point like a clock hand. I have tried below code which rotates the hand in circular path around a fixed point but not as like clock hand.
Matrix matrix = new Matrix();
matrix.reset();
matrix.preTranslate(0, 0);
matrix.postRotate(angleRotation, -0, -0);
matrix.postTranslate(240, 480);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(bitmap, matrix, null);
I am struggling for hours to get it sorted out. Any help will be greatly appreciated.
I have tried below links for help as well with no success.
SurfaceView, draw image and reduce size, rotate image
Android: How to rotate a bitmap on a center point
How to rotate a bitmap in Android about images center smoothly without oscillatory movement
I found the answer. Let px and py be any point on canvas. bitmap.getWidth()/2 is middle point along bitmap width. It can be any point for x cordinate. For y cordinate I have taken it as 10. angleRotation is the angle that is as per required.
So matrix.postTranslate(-bitmap.getWidth()/2, -10); is the point of rotation.
Below is the code.
Matrix matrix = new Matrix();
matrix.reset();
Paint paint = new Paint();
float px = 240;
float py = 480;
matrix.postTranslate(-bitmap.getWidth()/2, -10);
matrix.postRotate(angleRotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, paint);
Above code satisfy my requirements. Please modify it as per your need.
I use this to rotate my bitmaps.
private Bitmap rotateImage(Bitmap src,int degrees) {
Matrix matrix = new Matrix();
matrix.postRotate(degrees);
return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
}
I'm trying to overlay a bitmap onto another, placing it at the location the user touches. Here's the code:
public static Bitmap mergeImage(Bitmap base, Bitmap overlay, float x, float y)
{
Bitmap mBitmap = Bitmap.createBitmap(base.getWidth(), base.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(mBitmap);
canvas.drawBitmap(base, 0, 0, null);
canvas.drawBitmap(overlay, x, y, null);
return mBitmap;
}
The issue here is, even though the x & y coordinates are obtained correctly (I checked), the overlay bitmap does not place correctly.
When around the top left portion of the image, placement is correct. However, as I move right and down, the location seems to scale differently (i.e. if I touch the bottom right corner of the screen, the overlay places somewhere near the middle of the image, if I touch bottom left, it places near the middle left of the image and so on)
Both images have the same density (320).
Edit: New issue, i reduced the sizes of both images and now placement is roughly accurate. But saving the image to SD card skews the overlay image to a different (and quite random) location
I found the solution using Matrix for set location and scale x,y
public static Bitmap mergeImage(Bitmap base, Bitmap overlay, float x, float y)
{
Bitmap mBitmap = Bitmap.createBitmap(base.getWidth(), base.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(mBitmap);
Matrix matrix = new Matrix ();
matrix.postTranslate( x,y);
canvas.drawBitmap(base, 0, 0, null);
canvas.drawBitmap(overlay, matrix, null);
return mBitmap;
}
I spend something similar and I found the solution, you can see my post in the siguiete link
canvas.drawBitmap bad Location and size (not placing image correctly)
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
I want to capture an image from my camera and crop the captured image at specified co-ordinates then draw it on the middle of another image. The following code doesn't crash, but the captured image is screwing up, since the image stretches wrong.
Where am I going wrong?
Merry X'mas!
//Get the bottom image Bitmap
Bitmap bottomImage = BitmapFactory.decodeResource(getResources(), SelectDollarActivity.selectedImageId);
//Get the captured image Bitmap
Bitmap capturedImage = BitmapFactory.decodeFile(CaptureImage.cImagePath) ;
//************ CROP THE CAPTURED IMAGE *******************
int targetBitmapWidth = bottomImage.getWidth();
int targetBitmapHeight = bottomImage.getHeight() ;
//create a Bitmap with specified width & height
Bitmap clippedBitmap = Bitmap.createBitmap(targetBitmapWidth, targetBitmapHeight, Bitmap.Config.ARGB_8888);
//Construct a canvas with the specified bitmap to draw into.
Canvas canvas = new Canvas(clippedBitmap);
//************** cropping process goes HERE.........
//Create a new rectangle with the specified coordinates
RectF rectf = new RectF(left, top, right, bottom);
//Create an empty path
Path path = new Path();
//Add a closed oval contour to the path
path.addOval(rectf, Path.Direction.CW);
//Intersect the current clip with the specified path : CROPPING
canvas.clipPath(path);
canvas.drawBitmap(capturedImage, null, new Rect(0, 0, targetBitmapWidth, targetBitmapHeight), null);
//******** MERGING PROCESS *******************
//Construct a canvas with the specified bitmap to draw into.
Canvas combo = new Canvas(bottomImage);
// Then draw the second on top of that
combo.drawBitmap(clippedBitmap, 0f, 0f, null);
// bottomImage is now a composite of the two. so, display the bottom image
//************** DISPLAY THE MERGED IMAGE ****************
((ImageView)findViewById(R.id.billImage)).setImageBitmap(bottomImage);
Documentation states that drawBitmap accepts two more arguments, width and heights. In your code,
combo.drawBitmap(clippedBitmap, 0f, 0f, null);
only has the positioning.
You will need to set a few more arguments of course, but it should work :D