Geek Answers Handbook

Saving image overlays with captured camera snapshot

My application has a “photo bottle” function that will allow the user to take a picture with the camera and simultaneously display the overlay image on top of the camera’s overview. After the picture is taken, I need to save what the user saw when you take the picture in the file system.

I had one big problem when developing a solution for this: capturing an image with a compatible size, in which I can attach an overlay image, as a result of which the user saw when shooting.

It seems I can’t capture a camera image with specific sizes (I should basically choose from a list of them). Some phones may create certain sizes.

Since I cannot select the size of the captured image, it seems that I will need to include many different sizes of the overlay image and attach the best fit to the captured image. I can’t just tickle the old layer on top of the camera image and make it right.

Questions:

  • Am I complicating the process of creating a "photo image + image overlay" too much?
  • What suggestions do you have for this task without having to include several different overlay images?

Edit: Here is my solution (short). Please understand that this is not ideal and may not be the most effective way to do this, but it works. Some things may be unnecessary / redundant, but anything!

Notes:

  • This does not work well on tablet devices.
  • the overlay image must be rotated to be in landscape mode (even if you will be taking an image from a portfolio)
  • overlay size 480x320
  • you need to force the action in landscape mode when shooting (now the overlay looks like his portrait!)
  • I add an overlay image 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 } } }
+8
android
source share
1 answer

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

I would keep the overlays big enough with a wide border (bleed) to easily sort them by image using filters to draw it with good qaulity. I assume that overlays are what you would like to create and have transparent parts, such as an image of a clown without a face, so that the user can snap an elses face to it?

+1
source share

More articles:


All Articles