Android 從WebView緩存中獲取網頁圖片

時間 2019-11-08

標籤 android webview 緩存獲取網頁圖片欄目 Android 简体版

原文原文鏈接

在項目中常常會使用到WebView控件，當加載html頁面時，會在/data/data/應用package目錄下生成database與cache兩個文件夾以下圖如示:html

請求的url記錄是保存在webviewCache.db，而url的內容是保存在webviewCache文件夾下.java

爲了便於理解，接下來模擬一個案例，定義一個html文件,在裏面顯示一張圖片，用WebView加載出來，而後再試着從緩存裏把這張圖片讀取出來並顯示。android

第一步:新建一個Android工程命名爲WebViewCache.目錄結構以下:web

第二步:在assets目錄下新建一個html文件，命名爲index.html緩存

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
  <head>
    <title>WebViewCacheDemo</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  </head>
  
  <body>
     <img src="http://img04.taobaocdn.com/imgextra/i4/608825099/T2nGXBXXpaXXXXXXXX_!!608825099.jpg_310x310.jpg"/>
  </body></html>

第三步:修改main.xml佈局文件，一個WebView控件一個Button(點擊加載緩存圖片用)，代碼以下:網絡

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/webView"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="從緩存讀取圖片"
        android:id="@+id/button"/></LinearLayout>

第四步:修改主核心程序WebViewCacheDemo.java，這裏我只加載了index.html文件，按鈕事件暫時沒寫,代碼以下:app

package com.ljq.activity;import java.io.File;import java.io.FileInputStream;import android.app.Activity;import android.app.Dialog;import android.app.AlertDialog.Builder;import android.content.DialogInterface;import android.content.DialogInterface.OnClickListener;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Bundle;import android.view.View;import android.webkit.WebView;import android.widget.Button;import android.widget.ImageView;public class WebViewActivity extends Activity {    private WebView webView;    private static final String url="file:///android_asset/index.html";
    
    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        webView=(WebView)findViewById(R.id.webView);
        webView.loadUrl(url);
    }
}

第五步:在AndroidMainifest.xml文件中加訪問網絡的權限:框架

<uses-permission android:name="android.permission.INTERNET" />

運行效果以下：ide

此時咱們在WebViewCache.db裏的cache.table裏多了一條記錄以下圖所示:佈局

在cache/webviewCache/目錄下多了一個10d8d5cd文件，恰好和cache.table裏的filepath，咱們能夠判定這個文件就是咱們從網上拽下來的圖片:

爲了驗證猜測，我給Button增長事件響應，就是彈出Dialog，裏面加載緩存的圖片,完整代碼以下:

package com.ljq.activity;import java.io.File;import java.io.FileInputStream;import android.app.Activity;import android.app.Dialog;import android.app.AlertDialog.Builder;import android.content.DialogInterface;import android.content.DialogInterface.OnClickListener;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Bundle;import android.view.View;import android.webkit.WebView;import android.widget.Button;import android.widget.ImageView;public class WebViewActivity extends Activity {    private WebView webView;    private static final String url="file:///android_asset/index.html";
    
    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        webView=(WebView)findViewById(R.id.webView);
        webView.loadUrl(url);        
        //點擊按鈕時彈出對話框        Button button=(Button)findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {        
            public void onClick(View v) {
                ImageView imageView=new ImageView(WebViewActivity.this);
                imageView.setImageBitmap(getPictureFromCache());
                Builder builder=new android.app.AlertDialog.Builder(WebViewActivity.this);                //設置對話框的圖標                builder.setTitle("從緩存查看圖片");
                builder.setView(imageView);                //退出按鈕                builder.setPositiveButton("退  出", new OnClickListener(){                    public void onClick(DialogInterface dialog, int which) {                        //關閉alert對話框架                        dialog.cancel();
                    }
                    
                });
                builder.create().show();
            }
        
        });
    }    
    /**
     * 從緩存獲取圖片
     * 
     * @return
     */
    private Bitmap getPictureFromCache(){
        Bitmap bitmap=null;        try {            //這裏寫死，在實際開發項目中要靈活使用            File file=new File(getCacheDir()+"/webviewCache/10d8d5cd");
            FileInputStream inStream=new FileInputStream(file);
            bitmap=BitmapFactory.decodeStream(inStream);
        } catch (Exception e) {
            e.printStackTrace();
        }        return bitmap;
    }
}

第六步:再次運行工程，點擊button按鈕，效果以下圖所示: