안드로이드 웹뷰 캡쳐 원리 질문

Question

안녕하세요~ 안드로이드 개발자입니다.

현재 WebView 캡쳐에 관한 부분을 진행하고 있는데 기본적인 원리가 어떻게 돌아가는지 이해가 안되서 질문을 드립니다....

제가 이해하기로는(인터넷에 찾아본 결과) 웹뷰를 비트맵으로 저장해서 File로 떨어뜨리는 형식인 것 같은데... Bitmap만 만들고 파일로 변환하면 검은 화면이 나오더라구요 (아래는 소스입니다.)

 

Bitmap captureView = Bitmap.createBitmap(webview.getMeasuredWidth(), webview.getHeight(), Bitmap.Config.ARGB_8888);
~~~File 저장 Source~~~

말했듯, 이렇게만 하고 떨어뜨리면 검은 화면이 나오는 반면

 

Bitmap captureView = Bitmap.createBitmap(webview.getMeasuredWidth(), webview.getHeight(), Bitmap.Config.ARGB_8888);

        Canvas screenShotCanvas = new Canvas(captureView);
        arrWebView.get(0).draw(screenShotCanvas);

추가적으로 canvas와 draw를 넣어주면 정상적으로 나오더라구요...

 

이 부분이 잘 이해가 안되서 질문 드립니다...

기본적인 원리 혹은 동작 방식좀 알려주시면 감사하겠습니다 ㅠ-ㅜ

Answer 1

1. 캡쳐한 화면을 담을 비트맵 생성

2. 캔버스 생성 (1번의 비트맵을을 이용하도록)

3. 지정한 웹뷰에 캔버스를 전달 하고 캔버스 내 비트맵에 화면을 그리도록 지정

https://developer.android.com/reference/android/view/View.html#draw(android.graphics.Canvas) 

draw

Added in API level 1

void draw (Canvas canvas)

Manually render this view (and all of its children) to the given Canvas. The view must have already done a full layout before this function is called. When implementing a view, implement onDraw(android.graphics.Canvas) instead of overriding this method. If you do need to override this method, call the superclass version.

Comments

감사합니다~ 유익한 정보네요.ㅎ
혹시 webview.draw(canvas)를 하였을때 하얀 화면이 나오는 것은 rendering이 되지 않은 것 같아서 그러는데 어던 확인 방법ㅇ ㅣ있을까요??

---

현재 webview 이상의 크기로 bitmap 을 만든 상태에서 webview 만 capture 하는 형태인거 같습니다. webview 의 사이즈가 parent view 에 match_parent 하나요?

---

아니요.. webview의 layoutpram은 건들지 않으니까 그냥 내부 contents에 맞게 늘어나더라구요.ㅎ 그리고 좀 이상한(?)건 애플 최초 실행 후 첫 캡쳐에만 하얗게 되고 이후에는 캡쳐가 잘 되는 현상이 생겨서요ㅠ...ㅎ

---

onDraw 가 호출되기 전에 capture 를 요청해서 bitmap 을 채우지 못한 게 아닌가 싶습니다만.

저게 button 형태로 call 되는 코드인가요?

---

네~ 버튼 클릭시 저장하는 로직 탑니다.ㅎ음...현재 canvas를 html에 같이 포함해서 불러오고 있습니다.  그렇다면 ondraw가 끝났는지 확인 후 저장하면 알 수 있을까요~?

---

click 시점이 webview 가 loaded 된 시점인건가요? 아니면 click 과 동시에 webview 를 load 한 뒤 바로 capture를 하는건가요?

---

webview는 전부 로드 된 이후에 click할 수 있게끔 되어있습니다.ㅎ
기본 오퍼레이션은 펜으로 웹뷰에 낙서를 좀 한 이후 버튼을 click해서 화면을 캡쳐하게 됩니다. (여기서 화면 캡쳐는 잘 되는데 html canvas 부분은 캡쳐가 안되는 이슈가 발생하였습니다..ㄷㄷㄷ(software로 돌리면 떠지긴 하는데 너무 느려서 사용하진 못할 것 같구요.ㅋ))

---

software 로 된다면 해당 웹뷰를 캡춰 전에 setLayerType로 LAYER_TYPE_SOFTWARE 로 변경 하고 완료되면 LAYER_TYPE_HARDWARE 로 변경하시는식으로 해보세요

---

해당 방법도 해보긴 했으나 안되더라구요...ㅎ 웹뷰에 관한 layter type을 애초에 지정해야 가능한가봐요 ㅎ

---

현재 테스트 단말이 롤리팝 이상이면

if (Build.VERSION.SDK_INT >= 21) {
        webview.enableSlowWholeDocumentDraw ();
}
 
를 넣어보세요

---

네 넣어봤습니다만...잘 안되서... 결국 그냥 script로 저장시 background를 넣는 방법으로 해결했네요ㅠㅜ 결국 저한테는 미해결문제로...

---

이런 이런 -_ -            .

---

제가 이해하기로는
enableSlowWholeDocumentDraw  이 메소드가 html load하는것과 캔버스 저장을 가능케 하는거로 알고 있는데 맞나요ㅠ? 5.0부터 지원하는?