Android 獲取WebView的HTML圖片點選及檢視
阿新 • • 發佈：2019-02-12
圖示：
專案的知識點：
- 載入網頁後如何捕捉網頁中的圖片點選事件；
- 獲取點選的圖片資源後進行圖片顯示，獲取整個頁面所有的圖片；
- 支援檢視上下一張的圖片以及對圖片縮放顯示；
- 對圖片進行儲存；
- 其他：圖片快取的處理（不用每次都重新載入已檢視過的圖片）
專案程式碼結構：
前期準備（新增許可權、依賴和混淆設定）：
新增許可權：
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
新增依賴：
compile 'com.bm.photoview:library:1.4.1'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:25.0.0'
混淆檔案設定：
-keep public class * implements com.bumptech.glide.module.GlideModule -keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** { **[] $VALUES; public *; }
程式碼解析：
MainActivity很簡單，程式碼如下：
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); contentWebView = (WebView) findViewById(R.id.webView); contentWebView.getSettings().setJavaScriptEnabled(true); contentWebView.loadUrl("http://a.mp.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&client=ucweb&wm_aid=c51bcf6c1553481885da371a16e33dbe&wm_id=482efebe15ed4922a1f24dc42ab654e6&pagetype=share&btifl=100"); contentWebView.addJavascriptInterface(new MJavascriptInterface(this,imageUrls), "imagelistener"); contentWebView.setWebViewClient(new MyWebViewClient()); }
很顯然，就是WebView的基本初始化操作。其中
- 1.自定義了MJavascriptInterface的類用來實現js呼叫本地的方法；
- 2.自定義MyWebViewClient來實現對WebView的監聽管理。
MyWebViewClient程式碼如下：
public class MyWebViewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view, url);
addImageClickListener(view);//待網頁載入完全後設置圖片點選的監聽方法
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageStarted(view, url, favicon);
}
private void addImageClickListener(WebView webView) {
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistener.openImage(this.src); " +//通過js程式碼找到標籤為img的程式碼塊，設定點選的監聽方法與本地的openImage方法進行連線
" } " +
"}" +
"})()");
}
}
該類繼承自WebViewClient，在onPageFinished方法中設定addImageClickListener的監聽方法——>當整個WebView頁面載入完畢後，為每張圖片設定監聽事件——>這意味著，整個頁面未載入完畢時，點選是無效的。addImageClickListener的程式碼實現也很簡單，通過js找到相應的img標籤，這樣就知道是圖片了，然後為這些圖片設定點選監聽事件——>每當點選時呼叫自定義的openImage(url)方法。這個openImage(url)方法與MJavascriptInterface中對應的方法交相輝映，這樣就形成了js呼叫本地的方法。
MJavascriptInterface程式碼（主要為與js對應的本地方法的實現）：
public class MJavascriptInterface {
private Context context;
private String [] imageUrls;
public MJavascriptInterface(Context context,String[] imageUrls) {
this.context = context;
this.imageUrls = imageUrls;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
Intent intent = new Intent();
intent.putExtra("imageUrls", imageUrls);
intent.putExtra("curImageUrl", img);
intent.setClass(context, PhotoBrowserActivity.class);
context.startActivity(intent);
}
}
可以看到，openImage(url)方法實現的邏輯是：通過傳遞當前圖片的url與該WebView整個頁面的圖片列表（imageUrls）進行跳轉至PhotoBrowserActivity中。PhotoBrowserActivity就是用來顯示大圖的圖片列表的頁面。
此處的疑問：imageUrls怎麼獲得呢？
方式：1.伺服器端直接將WebView中所有的圖片按照順序組合成String陣列傳遞過來；2.或者直接將所有含img標籤的html程式碼傳遞過來，從而讓客戶端自己解析出所有圖片地址組合成的String陣列。（此處是採用的第二種，具體如何解析，可以下載原始碼檢視。）
OK，到了這裡算是完成了專案知識點的第1點：1.載入網頁後如何捕捉網頁中的圖片點選事件；
接下來就說明後面的幾點：
2.獲取點選的圖片資源後進行圖片顯示，獲取整個頁面所有的圖片；
3.支援檢視上下一張的圖片以及對圖片縮放顯示；
4.對圖片進行儲存；
其他所有的幾點實現均在PhotoBrowserActivity中，程式碼如下：主要就是將圖片放進ViewPager中進行顯示：
mPager = (ViewPager) findViewById(R.id.pager);
mPager.setPageMargin((int) (getResources().getDisplayMetrics().density * 15));
mPager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return imageUrls.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
if (imageUrls[position] != null && !"".equals(imageUrls[position])) {
final PhotoView view = new PhotoView(PhotoBrowserActivity.this);
view.enable();
view.setScaleType(ImageView.ScaleType.FIT_CENTER);
Glide.with(PhotoBrowserActivity.this).load(imageUrls[position]).override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL).fitCenter().crossFade().listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
if (position == curPosition) {
hideLoadingAnimation();
}
showErrorLoading();
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
occupyOnePosition(position);
if (position == curPosition) {
hideLoadingAnimation();
}
return false;
}
}).into(view);
container.addView(view);
return view;
}
return null;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
releaseOnePosition(position);
container.removeView((View) object);
}
});
curPosition = returnClickedPosition() == -1 ? 0 : returnClickedPosition();
mPager.setCurrentItem(curPosition);
mPager.setTag(curPosition);
if (initialedPositions[curPosition] != curPosition) {//如果當前頁面未載入完畢，則顯示載入動畫，反之相反；
showLoadingAnimation();
}
photoOrderTv.setText((curPosition + 1) + "/" + imageUrls.length);//設定頁面的編號
mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (initialedPositions[position] != position) {//如果當前頁面未載入完畢，則顯示載入動畫，反之相反；
showLoadingAnimation();
} else {
hideLoadingAnimation();
}
curPosition = position;
photoOrderTv.setText((position + 1) + "/" + imageUrls.length);//設定頁面的編號
mPager.setTag(position);//為當前view設定tag
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private int returnClickedPosition() {
if (imageUrls == null || curImageUrl == null) {
return -1;
}
for (int i = 0; i < imageUrls.length; i++) {
if (curImageUrl.equals(imageUrls[i])) {
return i;
}
}
return -1;
}
1.首先通過returnClickedPosition方法來獲得使用者點選的是哪一張圖片的位置並設定當前是哪一個page——>通過遍歷當前url與所有url來匹配獲取；
2.通過addOnPageChangeListener來實現對頁面滑動事件的監聽——>此處主要用來處理設定當前頁面的position、動畫、頁面序號顯示的邏輯；
3.PagerAdapter的實現——>每一頁內容的初始化，主要為instantiateItem，核心程式碼再次拖出來如下；
if (imageUrls[position] != null && !"".equals(imageUrls[position])) {
final PhotoView view = new PhotoView(PhotoBrowserActivity.this);
view.enable();
view.setScaleType(ImageView.ScaleType.FIT_CENTER);
Glide.with(PhotoBrowserActivity.this).load(imageUrls[position]).override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL).fitCenter().crossFade().listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
if (position == curPosition) {
hideLoadingAnimation();
}
showErrorLoading();
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
occupyOnePosition(position);
if (position == curPosition) {
hideLoadingAnimation();
}
return false;
}
}).into(view);
container.addView(view);
return view;
}
大體思路：1.通過PhotoView來實現圖片的伸縮顯示；2.通過Glide來載入圖片等處理；PhotoView是什麼——>就是圖片元件，對圖片的伸縮、動效、快取等方面進行了處理，點選地址檢視GitHub介紹>>：
- Gilde是什麼——>Google推薦的圖片載入庫，此處用它的理由是好用、簡單，點選地址檢視GitHub介紹>>：
- Glide的簡化形式——>Glide.with(...).load(圖片地址).override(載入圖片的大小).listener(設定監聽方法).into(某個一個元件，此處是PhotoView)，此處使用的是原圖載入，監聽方法中有兩個回撥方法：
- onException和onResourceReady，此處在onResourceReady做的處理是：當資源載入完畢時呼叫——>此時取消載入動畫的顯示。
- 頁面中的“頁面編號”和“儲存”的元件顯示是通過寫在整個Activity的佈局檔案中實現的，而不是通過在每一頁中寫入這些元件。以下為獲取圖片資源物件的程式碼：
private void savePhotoToLocal() {
ViewGroup containerTemp = (ViewGroup) mPager.findViewWithTag(mPager.getCurrentItem());
if (containerTemp == null) {
return;
}
PhotoView photoViewTemp = (PhotoView) containerTemp.getChildAt(0);
if (photoViewTemp != null) {
GlideBitmapDrawable glideBitmapDrawable = (GlideBitmapDrawable) photoViewTemp.getDrawable();
if (glideBitmapDrawable == null) {
return;
}
Bitmap bitmap = glideBitmapDrawable.getBitmap();
if (bitmap == null) {
return;
}
FileUtils.savePhoto(this, bitmap, new FileUtils.SaveResultCallback() {
@Override
public void onSavedSuccess() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(PhotoBrowserActivity.this, "儲存成功", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onSavedFailed() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(PhotoBrowserActivity.this, "儲存失敗", Toast.LENGTH_SHORT).show();
}
});
}
});
}
}
因為下載圖片需要知道當前處於哪一頁，所以在ViewPager初始化顯示和滑動時都給每一頁設定了tag，此時就派上了用場——>mPager.findViewWithTag獲取當前page中的佈局物件，然後獲得對應的PhotoView物件，從而經過處理最終獲取到Bitmap物件。這樣已經很簡單了，接下來只要將Bitmap物件儲存至本地即可，程式碼如下：
public class FileUtils {
public static void savePhoto(final Context context, final Bitmap bmp , final SaveResultCallback saveResultCallback) {
new Thread(new Runnable() {
@Override
public void run() {
File appDir = new File(Environment.getExternalStorageDirectory(), "out_photo");
if (!appDir.exists()) {
appDir.mkdir();
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//設定以當前時間格式為圖片名稱
String fileName = df.format(new Date()) + ".png";
File file = new File(appDir, fileName);
try {
FileOutputStream fos = new FileOutputStream(file);
bmp.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.flush();
fos.close();
saveResultCallback.onSavedSuccess();
} catch (FileNotFoundException e) {
saveResultCallback.onSavedFailed();
e.printStackTrace();
} catch (IOException e) {
saveResultCallback.onSavedFailed();
e.printStackTrace();
}
//儲存圖片後傳送廣播通知更新資料庫
Uri uri = Uri.fromFile(file);
context.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, uri));
}
}).start();
}
public interface SaveResultCallback{
void onSavedSuccess();
void onSavedFailed();
}
}
圖片如何儲存已經如程式碼所示，但要注意的是需要將已經儲存的圖片進行廣播通知資料庫更新——>這樣立馬進入微信或者扣扣點擊發送圖片，就可以看到剛剛儲存的圖片。
快取的處理：
使用Glide其中的一個好處是會將圖片預設快取，在需要清除快取時，只需要執行下面的程式碼（此處是放在MainActivity中，退出頁面即清除快取）：
@Override
protected void onDestroy() {
new Thread(new Runnable() {
@Override
public void run() {
Glide.get(MainActivity.this).clearDiskCache();//清理磁碟快取需要在子執行緒中執行
}
}).start();
Glide.get(this).clearMemory();//清理記憶體快取可以在UI主執行緒中進行
super.onDestroy();
}
特別注意：
- 若專案配置中將targetSdkVersion 指定為22以上，則要加入動態許可權申請的模組，否則在進行儲存操作時則會提示失敗！
- 專案中暴露的js介面類：MJavascriptInterface不能混淆，其呼叫的方法的宣告也不能混淆，所以還要新增如下混淆設定程式碼（程式碼因包名而變化）：
-keepclassmembers class com.example.administrator.webviewpagescannerapp.other.MJavascriptInterface{
public *;
}
-keepattributes *Annotation*
-keepattributes *JavascriptInterface* 程式碼示例：https://github.com/ganshenml/WebViewPageScannerApp