android 关于WebView点击图片展示大图

本文介绍了如何在Android WebView中实现点击图片展示大图并支持手势缩放的功能。通过重写WebViewClient,设置JavaScript接口,以及使用自定义的ZoomableImageView,实现了类似微信的图片查看体验。需要注意避免JavaScript冲突,特别是处理验证码图片的情况。
摘要由CSDN通过智能技术生成

最近因为项目的需要 在加载webview的时候如果有图片展示点击能够查看大图,刚开始百思不得其解,后来经过多方的努力得以实现。
这一行代码是为了重写js交互
webView.setWebViewClient(new MyWebViewClient(context, webView, layout_loding));
能够实现这样的功能 无外乎有两步 第一能够识别JS的语言

例如上面这段JS代码。
至于这个首先你的重写WebViewClient 这个类。代码如下
import Android.content.Context;
import android.graphics.Bitmap;
import android.util.Log;
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import Java.NET.URLDecoder;
import java.util.HashSet;
import java.util.Set;

import cn.jpush.android.api.JPushInterface;
import cn.jpush.android.api.TagAliasCallback;

/**
* Created by xiaomo on
*/
public class MyWebViewClient extends WebViewClient {

private static final String TAG = "MyWebViewClient";
private ProgressBar layout_loding;
private Context mContext;
private WebView mwebView;
public MyWebViewClient( Context context,WebView webView,ProgressBar layout_loding) {
    this.layout_loding = layout_loding;
    this.mContext = context;
    this.mwebView =webView;
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    // TODO Auto-generated method stub
    super.onPageStarted(view, url, favicon);
}

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    addImageClickListner();
    layout_loding.setVisibility(View.GONE);
}

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

    super.onReceivedError(view, errorCode, description, failingUrl);
    layout_loding.setVisibility(View.GONE);
}

private void addImageClickListner() {

    mwebView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByClassName(\"upload-img\"); " +
            "for(var i=0;i<objs.length;i++)  " +
            "{"
            + "    objs[i].onclick=function()  " +
            "    {  "
            + "        window.imagelistner.openImage(this.src);  " +
            "    }  " +
            "}" +
            "})()");
}

}
最要的莫过于就是这里写图片描述

这个得和js端协调一下 ,我用之前的方法 所有图片都能点击放大 ,因为我的这个项目里有获取图片验证码 ,尴尬的一幕发生了,本来想点击更换验证码的 居然放大了。后来我找来了写JS的人 他帮忙修改了一下得以解决。

这一步写完了话 完成了一半,紧接着是第二步

webView.addJavascriptInterface(new JavascriptInterface(context), “imagelistner”);
这是添加回调方法,需要重写。主要的目的是 js返回的图片地址链接和保存图片地址,接着往下看这段代码:
/**
* Created by xiaomo
*/

public class JavascriptInterface {

private Context context;

public JavascriptInterface(Context context) {
    this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
    System.out.println(img);
    Intent intent = new Intent();
    intent.putExtra("image", img);
    intent.setClass(context, ShowImgActivity.class);
    context.startActivity(intent);
    System.out.println(img);
}

}
上面这个intent 为了传递图片地址,你也可以用其他的方式保存起来然后调用。
实现了这些 还有最重要的 ,怎样才能实现像微信一样能够点击放大图片并且能都支持手指缩放咧!这里为网上找了一段实现的类 如下:

/*
* Copyright 2012 Laurence Dawson
*
* Licensed under the Apache License, Version 2.0 (the “License”);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an “AS IS” BASIS,
* WITHOUT WARR

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值