WebView에서 내부저장소 이미지 load하기

앱 내부저장소(internal Storage)에 저장했던 이미지를 html의 <img> 엘리먼트로 보여주려고 한다.
내부 저장소의 절대 경로는 data/user/0/{패키지명}/files/{이미지명} 으로 되어있다.
간단하게 예제를 작성해보자면 (일단 html에 <img id='img'>가 있다고 가정)
Javascript 소스

$(function(){
	var imageId = 'abc.png';
    var base64str = window.android.getImage(imageId);
    var src = 'data:image/png;base64,' + base64str;
    $("#img").src(src);
});

[1] window.android.getImage(imageId) : 자바스크립트에서 base64 형태의 string 값을 받아오는 함수를 호출한다.
Android 소스(Java)

public class MainActivity extends Activity {
    WebView mWebView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    	mWebView = (WebView) findViewById(R.id.webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        
        mWebView.addJavascriptInterface(new AndroidJavascriptBridge(this), "android");
    }

    private class WishWebViewClient extends WebViewClient  {
        ....
        private class AndroidJavascriptBridge {
            Context mContext;
             AndroidJavascriptBridge(Context c) {
                mContext = c;
             }
             @JavascriptInterface
             @SuppressLint("JavascriptInterface")
             public String getImage(String imageId) throws JSONException {
                File file = new File(getFilesDir().getPath() + File.seperator + imageId);
                Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
                return encodeImage(bitmap);
             }
        }

        private String encodeImage(Bitmap bm){
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            bm.compress(Bitmap.CompressFormat.JPEG, 100, baos);
            byte[] b = baos.toByteArray();
            return Base64.encodeToString(b, Base64.DEFAULT);
        }
    }
}

[1] onCreate - 웹뷰 세팅
[2] getImage - 어디선가 저장했던 파일을 불러오는 부분, getFilesDir()은 https://developer.android.com/training/data-storage/app-specific?hl=ko 문서 참조
[3] encodeImage - Bitmap to byte array to string