programing

Android-WebView의 로컬 이미지

randomtip 2021. 1. 17. 10:49
반응형

Android-WebView의 로컬 이미지


내 webview에서 로컬 이미지를 표시하려고합니다.

 String data = "<body>" + "<img src=\"file:///android_asset/large_image.png\"/></body>";
 webview.loadData(data, "text/html", "UTF-8");

이 코드는 대신 아무것도 표시하지 않습니다.

 webview.loadUrl("file:///android_asset/large_image.jpg");

이것은 작동하지만 그림뿐만 아니라 복잡한 웹 페이지가 필요합니다.

어떤 아이디어?


Webview에서 Html 파일을로드하고 자산 폴더에 이미지를 넣고 Html을 사용하여 해당 이미지 파일을 읽습니다.

<html>
  <table>
    <tr>
      <td>
        <img src="abc.gif" width="50px" alt="Hello">
      </td>
    </tr>
  </table>
</html>

이제 Webview에서 해당 Html 파일로드

webview.loadUrl("file:///android_asset/abc.html");  

시도해 볼 수도 있습니다.

String data = "<body>" + "<img src=\"large_image.png\"/></body>";

webView.loadDataWithBaseURL("file:///android_asset/",data , "text/html", "utf-8",null);

한 가지 편리한 방법 (종종 잊혀짐)은 HTML 콘텐츠에 base64 포함 이미지를 사용하는 것입니다. 이는 모바일 Webkit 브라우저 (IOS, Android ..)에서도 작동합니다.

이 방법을 사용하는 요점은 웹뷰에서 제한된 파일 시스템으로의 이미지 링크와 싸우는 대신 HTML 콘텐츠에 이미지를 포함 할 수 있다는 것입니다.

  <img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>

  xxxxx = base64 encoded string of images bytes

파일 시스템에서 (base64 포함) 이미지 데이터를 제공하려면 다음과 같이 할 수 있습니다.

1) Android에서는 ContentProvider를 사용하여 base64 형식의 이미지 문자열을 제공합니다.

<img src="content://.............."/>

2) 또는 JSOUP 또는 유사한 DOM 파서 (webview로 설정하기 전에)로 HTML을 전처리하고 적절하게 base64로 인코딩 된 이미지로 이미지 src를 조정할 수 있습니다.

이 방법의 단점은 이미지를 base64 문자열로 변환하고 웹뷰에 더 큰 HTML 데이터를 제공 할 때 오버 헤드가 포함된다는 것입니다.


이 방법을 사용하십시오.

mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");

folder.getAbsolutePath()할 수 있습니다 "file:///android_asset"하거나"/"


나는 \당신의 코드에 빠진 것이 있다고 생각 합니다

   String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";      

여기에 이미지 설명 입력

 webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);

나를 위해 가장 좋은 방법은 내 만드는 것이었다 .htmlMS 워드에있는 모든 텍스트와 이미지 파일을하고로 파일 저장 .html파일을 모두 복사 .html파일 및 해당 첨부 파일 폴더 자산으로 폴더 및 자산 폴더에 .html 파일의 주소를 제공 to webview.loadUrl()... 여기에해야 할 일이 있습니다 ...

WebView webview = (WebView) findViewById(R.id.webView1);

webview.loadUrl("file:///android_asset/learning1/learning1.htm");

Zain의 솔루션 이 저에게 효과적 이었습니다. HTML 파일과 CSS 및 이미지의 기타 하위 폴더가있는 내 폴더 www 를 추가하는 것을 잊었습니다 .

webView.loadDataWithBaseURL("file:///android_asset/www/",data , "text/html", "utf-8",null);

..


가장 간단하고 직접적인 방법은 html 편집기와 같은 kompozer또는 원하는대로 html 파일을 만드는 것입니다.

html 파일을 assets 폴더에 넣고 webView.loadUrl(filename). 자산 폴더에는 html 파일에서 참조하는 모든 그림도 포함되어야합니다.

html 파일에서 이미지 경로를 미리 수정하여 순수한 파일 이름 만 파일링하십시오. loadUrl에 전달하는 파일 이름은 접두사로 시작해야합니다 file:///android_asset/.

그림이나 파일이로드되지 않으면 파일 이름에 공백 , 하이픈 및 기타 이상한 내용이 있는지 확인하고 파일 이름을 변경하십시오.


질문에 대한 답이 올바르다는 것을 알고 있지만 효과적인 방법으로 구현할 것입니다.

1 단계 : 자산 폴더에 HTML 파일 만들기

예 : -imageLaod.html

참고 : 여기 HTML 파일에서 style = "width : 100 %"를 제공하여 전체 화면 이미지를 구현했습니다 .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <title>Load Image</title>
          <style type="text/css">
                h3{
                color:blue;
                }
        </style>   
    </head>
  <body>
        <h3>This image loaded from app asset folder.</h3>
        <img src="yourimage.png" style="width:100%" alt="companylogo"/>
  </body>
</html>

2 단계 : 이미지를 자산 폴더에 넣습니다. (예 : yourimage.png)

3 단계는 자바 파일에 코드를 넣습니다.

    String folderPath = "file:android_asset/";
    String fileName = "loadImage.html";
    String file = folderPath + fileName;
    WebView webView = findViewById(R.id.webview)
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setDisplayZoomControls(false);
    webView.loadUrl(file);

그리고 그것은 끝났습니다. WebView의 확대 / 축소 기능으로 전체 화면 이미지를 볼 수 있습니다 .

도움이 되었기를 바랍니다.

참조 URL : https://stackoverflow.com/questions/6127696/android-local-image-in-webview

반응형