【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，源碼地址