정상에서 IT를 외치다

[Android, Camera] 3. 카메라 프리뷰를 이용한 화면 캡처 및 배경 이미지 적용 본문

안드로이드

[Android, Camera] 3. 카메라 프리뷰를 이용한 화면 캡처 및 배경 이미지 적용

Black-Jin 2018. 8. 22. 15:42
반응형

안녕하세요. 블랙진입니다.


Capture the camera preview with image in android


Camera api 를 사용하여 화면을 캡처하고 캡처한 화면에 배경 이미지를  적용하는 방법에 대해 포스팅 해보겠습니다.


현 포스팅은 이전 포스팅의 연장입니다. ~!


1. 카메라 프리뷰를 이용한 화면 캡처 및 배경 이미지 적용


2. 카메라 프리뷰를 이용한 화면 캡처 및 배경 이미지 적용




위 두개를 모두 보고 오셔야 따라서 진행 하실 수 있습니다.



이번에는 프리뷰 화면 배경에 이미지를 추가하는 법에 대해 포스팅 해보겠습니다.


배경에 넣을 이미지는 아래 2개 입니다.


사진을 우클릭 후 '다른 이름으로 저장하기' 를 하신 후  frame1, frame2 로 다운받아 주세요







1. 캡처 기능 추가



_activity_main.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" >

<FrameLayout
android:id="@+id/cameraPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

<ImageView
android:id="@+id/ivFrameSet"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:orientation="horizontal"
android:background="#32000000"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="80dp">

<ImageView
android:id="@+id/ivFrame1"
android:layout_marginRight="20dp"
android:src="@drawable/frame1"
android:scaleType="fitXY"
android:layout_width="60dp"
android:layout_height="60dp" />

<ImageView
android:id="@+id/ivFrame2"
android:src="@drawable/frame2"
android:layout_width="60dp"
android:layout_height="60dp" />

</LinearLayout>

<LinearLayout
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<Button
android:id="@+id/btnCapture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="캡처" />

<Button
android:id="@+id/btnTransform"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="전환" />

</LinearLayout>


</RelativeLayout>

위와 같이 xml 에 적용해 주시면 아래와 같은 화면이됩니다.





상단에 있는 이미지를 누르면 카메라 배경에 해당 이미지가 나옵니다. 캡처를 하게되면 그 화면이 캡처되도록 구현했습니다.


그리고 전환 버튼은 카메라의 전면과 후면을 바꿀 수 있게 추가 코딩 해봤습니다. ㅎㅎ



잠깐


제가 구현한 방식은 Preview 화면 앞에 배경이 투명인 이미지를 추가하여 마치 배경이 있는 카메라 화면인 것 처럼 만들었습니다. Preview 화면에 직접 오버레이 된 방식이 아니므로 캡처 시 카메라 이미지 + 선택한 배경 이미지 를 합성했습니다. 디바이스 별로 카메라 이미지 크기와 배경 이미지 크기가 달라 약간의 오차가 발생할 수 있습니다. 이 부분은 추후 계속 수정해 나가겠습니다. 혹은 다른 방법을 알고 계신 분은 댓글 부탁드립니다.




_MainActivity.kt


버튼 3개를 추가해 줍니다.

btnTransform.setOnClickListener {
//전면, 후면 전환시 배경 이미지를 초기화 해줍니다.
ivFrameSet.setImageDrawable(null)
transformCamera()
}

ivFrame1.setOnClickListener {

ivFrameSet.setImageResource(R.drawable.frame1)
myCameraPreview?.setFrameId(R.drawable.frame1)

}

ivFrame2.setOnClickListener {

ivFrameSet.setImageResource(R.drawable.frame2)
myCameraPreview?.setFrameId(R.drawable.frame2)
}


이렇게 설정 되면 

mCameraPreview 의 setFrameId 함수를 통해 배경 이미지를 캡처시 합성 할 수 있게 됩니다.


전면과 후면 카메라를 바꿔주는 transformCamera 함수 또한 추가해 줍니다.


private fun transformCamera() {

if(CAMERA_FACING == Camera.CameraInfo.CAMERA_FACING_FRONT) {
CAMERA_FACING = Camera.CameraInfo.CAMERA_FACING_BACK

cameraPreview.removeAllViews()
startCamera()

} else {
CAMERA_FACING = Camera.CameraInfo.CAMERA_FACING_FRONT

cameraPreview.removeAllViews()
startCamera()
}
}





_MyCameraPreview.java


private int frameId = 0;

적용시킬 framId 값을 전역 변수로 선언해 줍니다.


/**
* 이미지 캡처 시 배경 선택
*/
public void setFrameId(int frameId) {
this.frameId = frameId;
}

setFrameId 함수를 추가해 배경 이미지의 id 값을 받아 옵니다.



private Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
public void onPictureTaken(byte[] data, Camera camera) {

...

/**
* frameId 가 있는 경우 해당 이미지를 합성해 준다.
*/
int width = bitmap.getWidth();
int height = bitmap.getHeight();

if(0 != frameId) {

Bitmap bp = BitmapFactory.
decodeResource(getContext().getResources(),frameId);
Bitmap resizeBp = Bitmap.createScaledBitmap(bp, width, height, true);

Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(resizeBp, 0f, 0f, null);

}


...

//파일로 저장
new MyCameraPreview.SaveImageTask().execute(currentData);

}
}
;

framId 가 0이 아닌 경우 해당 이미지를 bitmap 변환 후 Canvas 를 통해 이미지를 합성해 줍니다.


이렇게 설정하면 내가 배경으로 지정한 이미지와 함께 화면이 캡처됩니다.


아래는 MyCameraPreview 전체 소스 입니다.


카메라 기능을 공부중인데 정말 어려운것 같아요 ㅠㅜ


더욱 공부하여 카메라에 관한 많은 포스팅을 해보겠습니다.



이상 3장에 걸쳐 카메라 프리뷰를 이용한 캡처 및 배경 적용 을 포스팅 했습니다.


전체 소스 코드는 깃에 올렸으니 필요하신분은 다운 받아 사용하시면 됩니다.


전체 소스 코드



< 참고 사이트 >


구글 문서

카메라 캡처

카메라 방향 설정


반응형
Comments