【Android】WebView读取本地图片

背景

咱的博客园APP，是通过一个WebView来展示新闻的详情的。新闻必然是图文并茂的，无论是支持离线缓存还是加速新闻的打开速度， 都需要咱们打通本地存储与WebView之间的桥梁。

思路

1：首先把WebView的绝对路径设置为我们图片存储的根目录

  修改第一个参数以指向本地存储目录，这样就可以使用相对路径引用该目录下的本地文件了。如

webView.loadDataWithBaseURL("file:///storage/emulated/0/Android/data/zhexian.learn.cnblogs/files/zCache/", htmlContent, "text/html", "utf-8", null);

 

2：把图片资源存储到本地

针对博客园新闻实体，dudu老大贴心提供了ImageUrl字段，把该新闻用到的图片地址用分号隔离，拼接成一个字符串，参考例子

这种数据源我们处理起来自然是轻松加愉快了。

但是如果没有这个数据源的话，我们也可以使用正则表达式，遍历新闻内容的img标签进行处理。

咱本地存储规则是这样的，砍掉第三个/号之前的内容，将/转换成_号存储在缓存文件夹。

比如http://images2015.cnblogs.com/news/66372/201508/66372-20150826093938187-2008871077.jpg

处理后就是news_66372_201508_66372-20150826093938187-2008871077.jpg文件

 

3：遍历img标签，把src指向本地文件

标签的正则表达式如下

Pattern patternImgSrc = Pattern.compile("<img(.+?)src=\"(.+?)\"(.+?)/>");

在正则遍历的循环里，我们判断当前匹配到的src路径，本地是否存在，如果存在，则替换成本地路径，否则是使用占位图还是直接下载，取决于你的wifi无图策略。

 

4：添加js交互

在新闻的详情页面，用到js交互有两个地方

1：如果用户选择无图省流量模式，此时图片还是用占位图的，用户点击该占位图，可以加载原图替换

2：如果已经加载了图片，用户点击该图片时，可以查看大图

这里的知识涉及到一小部分android与js交互，以及js处理图片标签。

前者网上一大堆，就不细说，后者代码很简短，就贴上来

function showImage (obj,src) {
    if (obj.src.indexOf('click_load_day.png')<0 && obj.src.indexOf('click_load_night.png')<0)
        Android.displayImage(src);
    else
        obj.src=src;
}

最后的效果图如下

 

如：1占位图

 

2：点击之后使用原图替换掉占位图

 

3：点击替换后的图片，启动系统原生查看图片程序Activity。

时间有点赶，暂时写到这里，细节请参考站的博客园app，源码地址