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