티스토리 뷰

화제가 되었던(?) G2의 브라우저 All Capture기능에 대해 아십니까?

전체 화면 캡쳐로, 스크롤 해야 하는 부분까지 한번에 캡쳐할수 있는 기능입니다


이 기능을 내 WebView에 추가하고 싶다면 이글을 주의깊게 봐주세요


WebView의 전체화면 캡쳐 기능을 Jar 라이브러리로 만들었습니다

이름은 WebViewAllCapture입니다~



현재 WebView의 상태를 저장하는 방법에는 두가지가 있습니다

하나는 허니콤에서 추가된 saveArchive()를 이용하는 방법과

나머지는 이 전체화면 캡쳐 입니다


전자와 후자 모두 필자가 직접 라이브러리화 해서 만든것이 있습니다만

saveArchive()를 불러오는 부분이 제가 짠게 아니라 github에서 프로젝트를 가져와서 튜닝한거라서 조금 더 다듬은다음

라이센스 문제가 없는지 확인후 배포하도록 하겠습니다






라이브러리



2014-02-13 : v1 첫 릴리즈



먼저 스크린샷을 저장할때 sdcard를 사용하므로 퍼미션을주어야 합니다

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />



이 라이브러리의 사용방법은 아래와 같습니다

WebViewAllCapture mAllCapture = new WebViewAllCapture();


먼저 new를 해주신다음에 아래 코드로 캡쳐합니다


mAllCapture.onWebViewAllCapture(mWebView, mFilePath, mScreenShotName)


또는


mAllCapture.onWebViewAllCapture(mWebView, mFilePath, mScreenShotName, mFormat)


  • mWebView : 캡쳐할 화면이 나타나있는 WebView입니다
  • mFilePath : 스크린샷 파일이 저장될 위치를 String으로 입력하시면 되며, 마지막에 "/"을 꼭 붙혀야 합니다 ex) "/sdcard/"
  • mScreenShotName : 스크린샷 파일의 이름을 입력하시면 되며, 이때 확장자 까지 넣어주셔야 합니다
  • mFormat : 캡쳐 파일의 확장자를 따로 지정할때 사용합니다 (기본값은 PNG입니다)


위 두개의 메소드의 차이는 mFormat의 유무입니다

위 메소드를 사용하셔도 캡쳐에 전혀 지장이 없으며 파일 포멧은 PNG파일로 나옵니다

만약 PNG확장자가 아닌 다른 확장자로 내보내고 싶으시다면 mFormat을 사용해 주시면 되는대요

들어갈수 있는 것은 아래와 같습니다


  • CompressFormat.PNG : PNG포멧
  • CompressFormat.JPEG : JPG 포멧
  • CompressFormat.WEBP : WEBP 포멧



onWebViewAllCapture() 메소드를 실행하면 마지막에 스크린샷 파일의 존재 여부를 파악해서 boolean으로 리턴해 줍니다


Boolean result = mAllCapture.onWebViewAllCapture()


이렇게 result값을 받아와서 파일이 존재하는지 여부를 파악할수 있습니다






어플 예제 소스




저번에 배운 WebView예제에 전체화면 캡쳐 소스를 추가한 소스입니다

아무 화면을 꾹 누르면 전체화면이 캡쳐되도록 코드를 작성하였습니다


정상적으로 저장되면 아래 스크린샷 처럼 사진이 저장됩니다



이 예제와 WebView예제는 전체화면 캡쳐외 차이가 없습니다



ps. 아 API만드는것보다 소개하는게 시간이 더 걸리고 더 힘드네요..

누군가 꼭 유용하게 사용하셨으면 합니다~

댓글
  • Favicon of http://blackrug.tistory.com 블박 와.. 이런 기능이 있었군요..ㅋㅋㅋㅋㅋ
    감사합니다~

    그리고.. 블로그 테마 멋지네요..ㄷㄷ
    어디서 구하셨나요?
    2014.02.14 12:21 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 가장 대표적인 티스토리 반응형 스킨입니다~

    인터넷에 티스토리 반응형 스킨이라 치면 나와요
    2014.02.14 13:32 신고
  • Favicon of http://blackrug.tistory.com 블박 앗.. 감사합니다!! 2014.02.14 17:55 신고
  • 비밀댓글입니다 2016.08.05 06:32
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 오픈소스 주소입니다.

    https://bitbucket.org/whdghks913/webarchivereader
    2016.08.05 07:55 신고
  • scweeny Webview 관련 질문입니다.

    안드로이드 4.4.x 킷캣부터 Chromium Webview가 탑재되었잖아요.

    그러면서 이 Webview기반의 모든 브라우저에서 파일첨부기능이 먹통이 되었는걸로 아는데,, 그거 수정가능한가요?
    2014.02.19 17:52 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 최신 빌드에서 버그가 수정되었다고 합니다
    http://cafe.naver.com/develoid/374271

    버그 수정법은 안드로이드 소스단에서 고쳐야 하므로 최신버전 빌드를 받는방법말곤 없습니다
    2014.02.19 18:46 신고
  • scweeny 그,,,,링크가,,

    제글,,,,

    쿨럭,,

    ;;;;;;;;;;;;;;
    그나저나 알겠습니다.. 쿨럭
    2014.02.19 19:20 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 아ㅋㅋㅋㅋㅋㅋ 그렇군요 ㅎ
    소스를 수정하는거라.. 한다해도 힘들거예요..
    2014.02.19 19:41 신고
  • mcsonokong 좋은 정보 감사합니다.
    근데 루팅 없이 가능한가요?
    2014.05.28 20:34 신고
  • 궁금궁금 궁금한게 있습니다.
    웹뷰에서 만 가능한가요? 어플 자제 화면을 찍을려고하는데도 사용이 가능 할 까요?
    2014.11.17 10:33 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 어플 자체 View를 캡쳐하는것은 이 방법으로 안됩니다..
    조금 검색해보시면 관련 예제를 찾으실수 있으실겁니다
    2014.11.17 18:04 신고
  • songmj apk를 다운받았는데요.
    전체캡쳐하는데 사용하는 어플맞나요?
    하는방법이 캡쳐하고싶은 주소를 치고 GO를 눌러서 이동해서 화면 길게 누르고 있으면 되는건가요?
    그런데 주소를 쳐서 이동했는데 '웹페이지를 표시할수없습니다'로 나오는데 뭐가 문제인건가요?
    2016.01.09 12:34 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 이 앱은 라이브러리 샘플앱입니다.
    네이버 앱에도 기능이 있으니 네이버앱을 사용해주세요
    2016.01.09 13:21 신고
  • MrCheon 좋은 글 봤습니다!!! 저도 적용해서 사용해봤는데 음..
    제가 현재 보고있는 뷰( surfaceview 영역)을 제외한 나머지는 하얀색으로 나오더라구요..
    일반 bitmap으로 해서 capture할때도 동일한 ㅎ현상이 나타나는데 혹시 어떤 해결법이 있을까요ㅠ?
    2016.07.11 16:05 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 그게 원래 그런거란 말이 있더라고요..
    처음의 부모 레이아웃을 캡쳐하면 스크롤 되는 부분까지 전부 캡쳐할 수 있다고 하는데 시도해보진 않았습니다.
    2016.07.15 22:51 신고
  • nafen 감사합니다. 많은 도움이 됐어요..^^
    롤리팝 이상버전에서는
    protected void onCreate(Bundle savedInstanceState) {
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
    WebView.enableSlowWholeDocumentDraw();
    }
    }

    추가해주시면 전체 이미지로 잘 나옵니다.^^
    2016.11.10 15:59 신고
댓글쓰기 폼