Android-记录怎么用webView加载含有base64格式图片的html片段

最新推荐文章于 2023-02-08 14:14:13 发布

攻城狮-千羽

最新推荐文章于 2023-02-08 14:14:13 发布

阅读量2.4k

点赞数 1

分类专栏： android java 文章标签： android android webView加载html片段 Android webView加载含有base64格式图片的html片 webView加载js方法 Android调用js方法

本文链接：https://blog.csdn.net/weixin_43175808/article/details/101285850

版权

android 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

java

6 篇文章 0 订阅

订阅专栏

最近遇到个问题Android里面用webView加载含有base64格式图片的html,很多人可能可以直接加在使用下面这种方法，但是运行之后你会发现里面的base64格式图片显示不出来。

 webview.loadData(Html.fromHtml(content).toString(), "text/html", "UTF-8");

看网上的说有的方法是把里面的base64格式的图片先转换成图片然后再存到服务器，然后再把base64替换下，这样虽然也可以实现但是我感觉很麻烦，并且我们的需求就是Android处理，服务器不改了，这是我看到的那个替换的方法有需要的可以看下(https://blog.csdn.net/shirley153/article/details/96978104)。
话不多说了，下面是我想到的方法以及实现，我的方法就是
1.创建一个web.html文件，并且创建一个有参数的方法供Android调用,就是很简单的那种

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<style>
			html {
				padding: 15px;
			}
			body {
				word-wrap: break-word;
				font-size: 13px;
				padding: 0px;
				margin: 0px
			}
			p {
				padding: 0px;
				margin: 0px;
				font-size: 16px;
				color: #222222;
				line-height: 1.3;
			}
			img {
				padding: 0px, margin:0px;
				max-width: 100%;
				width: auto;
				height: auto;
			}
		</style>
</head>
<body>
<div id="content" style="width: 100%;height: 100%;">111</div>
</body>
<script charset="UTF-8">
		function showWebView(param){
			document.getElementById("content").innerHTML=param.content;
		}
	</script>
</html>

2.通过Android里面的webView调用html里面的有参方法，去加载。下面是Activity和布局
MainActivity

package com.qy.ndkdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.res.AssetManager;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.sample_text);
        WebSettings websettings = webView.getSettings();
        webView.loadUrl("file:///android_asset/web.html"); //得到web.html文件路径，并且加载
        websettings.setJavaScriptEnabled(true);
        webView.getSettings().setDefaultTextEncodingName("utf-8");
        webView.getSettings().setJavaScriptEnabled(true);
      //这里要注意调用js的方法一定要再页面加载完成后（onPageFinished里面）调用，不然会不成功
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
              //webjson.json,真实项目中一般都是网络获取,现在就直接写在本地了
                String jsonStr = getJson(MainActivity.this, "webjson.json");//获取assets目录下的json文件数据
                String str = "javascript:showWebView(" + jsonStr + ")"; //调用js方法
                webView.loadUrl(str);
            }
        });

    }

    //将json数据转换成字符串
    public String getJson(Context context, String fileName) {

        StringBuilder stringBuilder = new StringBuilder();
        try {
            AssetManager assetManager = context.getAssets();
            BufferedReader bf = new BufferedReader(new InputStreamReader(
                    assetManager.open(fileName)));
            String line;
            while ((line = bf.readLine()) != null) {
                stringBuilder.append(line);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return stringBuilder.toString();
    }

}

MainActivity 的布局文件,很简单就一个webView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <WebView
        android:id="@+id/sample_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

用到的webjson.json

{
  "content": "<ul><li>这是简单的测试<img src=\"data:image/jpeg;base64,"base64格式的字符串，这里因为问题太多就不贴了""></li></ul>"
  }

web.html和webjson.json的存放目录

web.html和webjson.json的存放目录
运行结果截图：
在这里插入图片描述
到这里就Ok了。

攻城狮-千羽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录