10

My application has a "photobooth" feature which will allow the user to take a picture with the camera and at the same time show an overlay image on top of the camera view. After the picture is taken, i need to save what the user saw while taking the picture to the filesystem.

I have experienced 1 big problem while developing a solution to this: capturing an image with the compatible dimensions in which i can attach an overlay image to resulting in what the user saw while taking the picture.

It seems i cannot capture an image from the camera with defined dimensions(i have to basically pick from a list of them). Some phones only can produce certain dimensions.

Since i cannot choose the size of the captured image, it seems as though i will be required to include many different sizes of the overlay image, and attach the best match to the captured image. I can't just slap any old overlay on top of the camera image and make it look right.

Questions:

  • Am i over-complicating this "camera image + overlay image creation" process?
  • What suggestions do you have in completing this task without the need of including several different sizes overlay images?

Edit: Here is my solution(brief). Please realize this is not a perfect and maybe not most efficient way to do this, but it works. Some things may be unnecessary/redundant but whatever!

Notes:

  • this doesn't work too great on tablet devices.
  • the overlay image needs to be rotated to be in landscape mode(even though you will be taking the image holding the phone in portrait)
  • overlay size is 480x320
  • you need to force the activity to landscape mode while taking the picture(now the overlay looks like its portrait!)
  • i add the overlay image view using addContentView(overlayImageView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

...

final Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
    @Override
    public void onPictureTaken(byte[] data, Camera camera) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        Bitmap mutableBitmap = null;
        try {
                    //for a PORTRAIT overlay and taking the image holding the phone in PORTRAIT mode
            mutableBitmap = BitmapFactory.decodeByteArray(data, 0, data.length, options).copy(Bitmap.Config.RGB_565, true);
            Matrix matrix = new Matrix();
            int width = mutableBitmap.getWidth();
            int height = mutableBitmap.getHeight();
            int newWidth = overlayImage.getDrawable().getBounds().width();
            int newHeight = overlayImage.getDrawable().getBounds().height();
            float scaleWidth = ((float) newWidth) / width;
            float scaleHeight = ((float) newHeight) / height;
            matrix.postScale(scaleWidth, scaleHeight);
            matrix.postRotate(90);

            Bitmap resizedBitmap = Bitmap.createBitmap(mutableBitmap, 0, 0, mutableBitmap.getWidth(), mutableBitmap.getHeight(), matrix, true);
            finalBitmap = resizedBitmap.copy(Bitmap.Config.RGB_565, true);
            Canvas canvas = new Canvas(finalBitmap);

            Bitmap overlayBitmap = BitmapFactory.decodeResource(getResources(), overlay);
            matrix = new Matrix();
            matrix.postRotate(90);
            Bitmap resizedOverlay = Bitmap.createBitmap(overlayBitmap, 0, 0, overlayBitmap.getWidth(), overlayBitmap.getHeight(), matrix, true);
            canvas.drawBitmap(resizedOverlay, 0, 0, new Paint());
            canvas.scale(50, 0);
            canvas.save();
            //finalBitmap is the image with the overlay on it
        }
        catch(OutOfMemoryError e) {
            //fail
        }
    }
}
james
  • 26,141
  • 19
  • 95
  • 113

1 Answers1

1

I think this is a question of how you manipulate your overlays. You can crop it according to the captured image size and resize it to fit, preserving its ratio. You can place the overlay, by comparing its ratio to the backround ratio, to its optimal position.

I would keep overlays big enough, with a wide border (bleed), to easily size them to an image using filters to draw it with good qaulity. I guess overlays are something which you would design and have transparent parts, like an image of a clown without a face so the user can snap somebody elses face into it?

Lumis
  • 21,517
  • 8
  • 63
  • 67
  • yes, the overlay image may be something like "aim the camera so your target's head is where the clown's head should be" – james Mar 10 '11 at 18:28
  • In that case your overlays should have wide enough "bleed" so that you can easily crop them. You'll have to adjust your formulas to different orientations as well. – Lumis Mar 10 '11 at 18:40
  • arg... this is a pain! i will update this posts' accepted answer once i have completed this task. i am here consistently so you will get credit in due time! – james Mar 10 '11 at 18:50
  • Yes, you are going to spend more time on design than on programming. It is a good idea, tell me when you upload the application, I would like to clown some of my work mates... ;) – Lumis Mar 10 '11 at 18:55
  • I need the same thing But using above code i am not getting the any result. Please help me for it. – Shreyash Mahajan Oct 13 '11 at 12:10