Android中混合式开发的过程中，加载html页面的时候，如果该页面加载的资源比较多，比如css，js，公用的图片资源等，就会导致该页面加载缓慢，耗费大量的流量，这对流量限制的客户端来说，用户体验非常不好，所以就需要将这些资源存放在APP中，待APP启动的时候，直接从本地加载这些公用的资源。（本方法只针对html文件从网络上获取）
方式一：使用loadDataBaseUrl的方式
当从网络上加载的html页面中包含“file:///……”或者“content://packagename/……”（content://……这种需要重写Provider）这样的路径时，可以直接使用loadDataWithBaseURL("file:///",htmlSource,"text/html;charset=utf-8",null,null)重新加载，其中htmlSource为网页源代码。
参考"stackoverflow" Load HTML data into WebView, referencing local images?
activity中示例代码
/**
* 加载html文件
* @param path 文件路径
*/
private void loadHtml(final String path){
new Thread(new Runnable() {
@Override
public void run() {
try {
URL url = new URL(path.trim());
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true); //允许输入流，即允许下载
conn.setDoOutput(true); //允许输出流，即允许上传
conn.setUseCaches(false); //不使用缓冲
conn.setRequestMethod("GET"); //使用get请求
if (conn.getResponseCode() == 200){
InputStream inputStream = conn.getInputStream();
ByteArrayOutputStream baos = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int length = -1;
while((length = inputStream.read(buffer))!=-1){
baos.write(buffer,0,length);
baos.flush();
}
final String htmlSource = baos.toString();
runOnUiThread(new Runnable(){
@Override
public void run() {
//重写
mWebView.loadDataWithBaseURL("file:///",htmlSource,"text/html;charset=utf-8",null,null);
}
});
}
} catch (Exception e) {
e.printStackTrace();
}
}
}).start();
}
H5示例代码（该h5页面是放在服务器上面的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5调用Native“获取地理位置”与“拍照上传“的功能</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<!--放在assets目录下面的css.css文件-->
<link href="file:///android_asset/css.css" rel="stylesheet">
</head>
<body>
<!-- 用css设置样式，看通过这种方式是否能加载本地assets目录中的css文件 -->
<h4 class="text-left">H5调用安卓“拍照上传“的功能：</h4>
<!-- 放在SDCARD中的图片 -->
<img src="file:///storage/emulated/0/newCrop.jpg" alt="" class="img-responsive img-thumbnail">
<!-- 放在SDCARD中的图片 packagename为包名-->
<img src="content://packagename/storage/emulated/0/newCrop.jpg" alt="本地图片"/>
</body>
</html>
css文件内容如下
.text-left{background-color:#f00}
IMG_20161214_163615.jpg
正常结果如上所示。
方式二：使用ContentProvider的方式
使用content://方式访问本地资源的时候，需要重写ContentProvider,简单代码如下：
public class LoadPicProvider extends ContentProvider {
@Override
public boolean onCreate() {
return false;
}
@Nullable
@Override
public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) {
return null;
}
@Nullable
@Override
public String getType(Uri uri) {
return null;
}
@Nullable
@Override
public Uri insert(Uri uri, ContentValues values) {
return null;
}
@Override
public int delete(Uri uri, String selection, String[] selectionArgs) {
return 0;
}
@Override
public int update(Uri uri, ContentValues values, String selection, String[] selectionArgs) {
return 0;
}
@Nullable
@Override
public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundException {
URI filePath = URI.create( "file://" + uri.getPath() );
File file = new File( filePath );
ParcelFileDescriptor parcel = null;
try {
parcel = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return parcel;
}
}
然后在mainfest中进行注册
<provider android:authorities="packagename" android:name=".LoadPicProvider">
</provider>
方式三：使用Base64的方式
参考链接 StackOverflow Embedding Base64 Images
示例代码
ByteArrayOutputStream out = new ByteArrayOutputStream();
//TODO 文件读取需要线程操作
FileInputStream fis = new FileInputStream(imageCropUri.toString());
byte buff[] = new byte[1024];
int length = -1;
while((length = fis.read(buff))!= -1){
out.write(buff,0,length);
out.flush();
}
String fileBase64 = Base64.encodeToString(out.toByteArray(),Base64.NO_WRAP);
//将当前的fileBase64传到h5页面中，并设置到img上
js代码
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
方式四：使用shouldInterceptRequest进行文件资源的拦截
从API 11(Android 3.0)开始引入这个方法。shouldInterceptRequest这个回调可以通知主程序WebView处理的资源（css,js,image等）请求，并允许主程序进行处理后返回数据。如果主程序返回的数据为null，WebView会自行请求网络加载资源，否则使用主程序提供的数据。注意这个回调发生在非UI线程中,所以进行UI系统相关的操作是不可以的。
shouldInterceptRequest有两种重载。
- public WebResourceResponse shouldInterceptRequest (WebView view, String url) 从API 11开始引入，API 21弃用
- public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request) 从API 21开始引入
所以在使用的时候，最好两者都要进行重写。
测试代码如下
mWebView.setWebViewClient(new WebViewClient() {
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
String key = "http://localhost/";
WebResourceResponse response = null;
if (url.contains(key)) {
try {
String imgPath = url.replace(key,"");
imgPath = Uri.parse(imgPath).getPath();
InputStream localCopy = new FileInputStream(imgPath);
//当前只针对图片
response = new WebResourceResponse("image/png", "UTF-8", localCopy);
} catch (IOException e) {
e.printStackTrace();
}
}
return response;
}
});
注意：当从本地相册拍照完成后，图片的uri可能是这样的file:///storage/emulated/0/newCrop.jpg，如果这个url回调给 js是显示不出来的。因为webview根本不会自动加载。所以这个时候可以考虑在当前地址上面添加http://……这样这个url设置完成之后，才能够正常的发出。
例如我得拍照产生的image的uri如下
<img src="file:///storage/emulated/0/newCrop.jpg" alt="" class="img-responsive img-thumbnail">
用拦截的方式显示不出来，然后后我改为
<img src="http://localhost/file:///storage/emulated/0/newCrop.jpg" alt="" class="img-responsive img-thumbnail">
这样在http请求发生的时候，会被shouldInterceptRequest方法拦截
参看链接：
Webview加载本地图片的方案对比
网友评论
试了用ContentProvider方式加载本地图片, 还是会报错,楼主有什么解决办法吗