Search code examples
androidoverlaycropandroid-camera2

How to capture image inside the overlay in Camera2 API Android?

Image inside overlay

I need to capture only the image which is inside the overlay box as shown. I don't need the entire image in the TextureView. I'm new to Android and I couldn't figure out a few solutions that were mentioned to capture just the image inside the rectangular region. The overlay must be at the center. I tried, but I couldn't achieve it.

I followed this code - Google Sample-Camera2Basic

To add overlay, I used the following code:

activity_camera2_basic_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.googlecamera2.AutoFitTextureView
        android:id="@+id/texture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

    <LinearLayout
        android:id="@+id/surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_centerInParent="true"/>

    <FrameLayout
        android:id="@+id/control"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:background="@color/control_background">

        <Button
            android:id="@+id/picture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/picture" />

        <ImageButton
            android:id="@+id/info"
            android:contentDescription="@string/description_info"
            style="@android:style/Widget.Material.Light.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:padding="20dp"
            android:src="@drawable/ic_action_info" />

    </FrameLayout>

</RelativeLayout>

I implemented the onCreateView like this:

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_camera2_basic, container, false);

        linearLayout = view.findViewById(R.id.surface);
        linearLayout.addView(new Rectangle(getActivity()));
        return view;
    }

EDIT

Rectangle.java

package com.example.googlecamera2;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;

public class Rectangle extends View {
    Paint paint = new Paint();

    public Rectangle(Context context) {
        super(context);
    }


    @Override
    public void onDraw(Canvas canvas) {
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        Rect rect = new Rect(120, 100, 620, 900);
        canvas.drawRect(rect, paint );
    }
}

Please suggest how I can get just the cropped image from the overlay region and center the overlay in the preview.

Solution

  • I initally created a bitmap, say, capturedBitmap. This is the original bitmap captured by the camera.

    capturedImage = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);

    Then I had to find the exact coordinates of the overlay. 

    // Set the left, top, width and height of the overlay to get that portion of the image.
// Also, rotate the image i.e., rotationMatrix

croppedImage = Bitmap.createBitmap(capturedImage, left, top, cropWidth, cropHeight, rotationMatrix, false);