时间戳

首页 > 解决方案 > 如何在android webview中显示图像

java - 如何在android webview中显示图像

问题描述

我正在开发一个 android 项目（java），我想在其中使用 webview 来显示通过使用文件选择器从手机存储中选择的图像。在我的java代码中，我有

package com.example.test;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
  ImageView imageView;
  Button btn_filePicker;
  Intent myFileIntent;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      imageView = (ImageView)findViewById(R.id.imageView);
      btn_filePicker = (Button)findViewById(R.id.btn_filePicker);

      btn_filePicker.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              myFileIntent = new Intent(Intent.ACTION_GET_CONTENT);
              myFileIntent.setType("*/*");

              startActivityForResult(myFileIntent, 10);

          }
      });
  }

  @Override
  protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {

      switch (requestCode) {
          case 10:
              if (resultCode == RESULT_OK) {
                  String path = data.getData().getPath();
                  Uri uri = data.getData();

                  imageView.setImageURI(uri);
                  WebView webView = (WebView) findViewById(R.id.webview);
                  WebSettings webSettings = webView.getSettings();
                  webSettings.setJavaScriptEnabled(true);
                  webView.loadUrl("file:///android_asset/index.html");
                  webView.setWebViewClient(new WebViewClient(){
                      public void onPageFinished(WebView view, String url){
                          webView.loadUrl("javascript:init('"+ uri +"')");
                      }
                  });
              }
              break;
      }
  }
}

这段代码的作用是它获取图像并首先通过图像视图显示它，之后我还希望它以 html 显示图像。在我的html代码中：

<html>
<head>
    <title>
        Hi
    </title>
</head>
<body>
<h1>path</h1>
<img id="image">
<script>
    function init(val){
        document.write(val);
        var img_input = document.getElementById("image");
        img_input.src = val;
    }
    init();
</script>
</body>
</html>

它确实显示了屏​​幕“content://com.example/document/image:7363364”的路径。但是，它不显示图像。

我的问题是：

有没有办法获取图像并将其添加到 android assets 文件夹中？

如果没有，我该如何解决这个问题？

欢迎任何建议。

标签： javaandroid

解决方案

//Convert it as Bitmap
Bitmap bitmap = null;
String image = null; //Base64 Encoded Image
try {
    bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uri);

    // Convert bitmap to Base64 encoded image for web
    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
    byte[] byteArray = byteArrayOutputStream.toByteArray();
    String imgageBase64 = Base64.encodeToString(byteArray, Base64.DEFAULT);
    image = "data:image/png;base64," + imgageBase64;

} catch (IOException e) {
    e.printStackTrace();
}
String image_final = image;

现在，修改你的onPageFinished

webView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {
        if (image_final != null)
            webView.loadUrl("javascript:init('" + image_final + "')");
    }
});

您的 HTML 代码为：

<html>
<head>
    <title>
        Hi
    </title>
</head>
<body>
<h1>path</h1>
<img id="image">
<script>
    function init(val){
        document.write(val);
        var img_input = document.getElementById("image");
        img_input.src = val;
    }
   // init(); This line is not needed
</script>
</body>
</html>

希望有帮助！

推荐阅读