404 Not Found
The requested URL /q/5571/ was not found on this server.Android 实现WebView点击图片查看大图列表及图片保存功能
转载 &更新时间：日 09:40:39 & 作者：Eyas-
这篇文章主要介绍了Android 实现WebView点击图片查看大图列表及图片保存功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
&在日常开发过程中，有时候会遇到需要在app中嵌入网页，此时使用WebView实现效果，但在默认情况下是无法点击图片查看大图的，更无法保存图片。本文将就这一系列问题的实现进行说明。
项目的知识点：
加载网页后如何捕捉网页中的图片点击事件；
获取点击的图片资源后进行图片显示，获取整个页面所有的图片；
支持查看上下一张的图片以及对图片缩放显示；
对图片进行保存；
其他：图片缓存的处理（不用每次都重新加载已查看过的图片）
项目代码结构：
前期准备（添加权限、依赖和混淆设置）：
添加权限：
&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;
代码解析：
MainActivity很简单，代码如下：
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=c51bcf6cda371a16e33dbe&wm_id=482efebe15eddc42ab654e6&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 {
public void onPageFinished(WebView view, String url) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view, url);
addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法
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.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 String [] imageU
public MJavascriptInterface(Context context,String[] imageUrls) {
this.context =
this.imageUrls = imageU
@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() {
public int getCount() {
return imageUrls.
public boolean isViewFromObject(View view, Object object) {
return view ==
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&() {
public boolean onException(Exception e, String model, Target&GlideDrawable& target, boolean isFirstResource) {
if (position == curPosition) {
hideLoadingAnimation();
showErrorLoading();
public boolean onResourceReady(GlideDrawable resource, String model, Target&GlideDrawable& target, boolean isFromMemoryCache, boolean isFirstResource) {
occupyOnePosition(position);
if (position == curPosition) {
hideLoadingAnimation();
}).into(view);
container.addView(view);
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() {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
public void onPageSelected(int position) {
if (initialedPositions[position] != position) {//如果当前页面未加载完毕，则显示加载动画，反之相反；
showLoadingAnimation();
hideLoadingAnimation();
curPosition =
photoOrderTv.setText((position + 1) + "/" + imageUrls.length);//设置页面的编号
mPager.setTag(position);//为当前view设置tag
public void onPageScrollStateChanged(int state) {
private int returnClickedPosition() {
if (imageUrls == null || curImageUrl == null) {
return -1;
for (int i = 0; i & imageUrls. i++) {
if (curImageUrl.equals(imageUrls[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&() {
public boolean onException(Exception e, String model, Target&GlideDrawable& target, boolean isFirstResource) {
if (position == curPosition) {
hideLoadingAnimation();
showErrorLoading();
public boolean onResourceReady(GlideDrawable resource, String model, Target&GlideDrawable& target, boolean isFromMemoryCache, boolean isFirstResource) {
occupyOnePosition(position);
if (position == curPosition) {
hideLoadingAnimation();
}).into(view);
container.addView(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) {
PhotoView photoViewTemp = (PhotoView) containerTemp.getChildAt(0);
if (photoViewTemp != null) {
GlideBitmapDrawable glideBitmapDrawable = (GlideBitmapDrawable) photoViewTemp.getDrawable();
if (glideBitmapDrawable == null) {
Bitmap bitmap = glideBitmapDrawable.getBitmap();
if (bitmap == null) {
FileUtils.savePhoto(this, bitmap, new FileUtils.SaveResultCallback() {
public void onSavedSuccess() {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(PhotoBrowserActivity.this, "保存成功", Toast.LENGTH_SHORT).show();
public void onSavedFailed() {
runOnUiThread(new Runnable() {
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() {
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);
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中，退出页面即清除缓存）：
protected void onDestroy() {
new Thread(new Runnable() {
public void run() {
Glide.get(MainActivity.this).clearDiskCache();//清理磁盘缓存需要在子线程中执行
}).start();
Glide.get(this).clearMemory();//清理内存缓存可以在UI主线程中进行
super.onDestroy();
特别注意：
1.若项目配置中将targetSdkVersion 指定为22以上，则要加入动态权限申请的模块，否则在进行保存操作时则会提示失败！
2.项目中暴露的js接口类：MJavascriptInterface不能混淆，其调用的方法的声明也不能混淆，所以还要添加如下混淆设置代码（代码因包名而变化）：
-keepclassmembers class com.example.administrator.webviewpagescannerapp.other.MJavascriptInterface{
-keepattributes *Annotation*
-keepattributes *JavascriptInterface*
源码已经上传至GitHub，&&
以上所述是小编给大家介绍的Android 实现WebView点击图片查看大图列表及图片保存功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
基于JavaScript实现移动端点击图片查看大图点击大图隐藏Script
摘要：一、需求点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。二、代码&!DOCTYPEhtml&&html&&metacharset=&utf-8&/&&headrunat=&server&&&title&JQuery点击图片查看大图bystarof&/title&&styletype=&text/css&&g
点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。
&!DOCTYPE html&&html&&meta charset=&utf-8&/&&head runat=&server&&&title&JQuery点击图片查看大图by starof&/title&&style type=&text/css&&.exampleImg { height:100 cursor:}&/style&&script src=&http://code.jquery.com/jquery-latest.js&&&/script&&script type=&text/javascript&&//alert($);// (function (window, undefined) {// var MyJQuery = function () {// window.MyjQuery = window.$ = jQ window.$ = MyJQ// };// })(window);// alert($);$.fn.ImgZoomIn = function () {bgstr = '&div id=&ImgZoomInBG& style=& background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position: left:0; top:0; z-index:10000; width:100%; height:100%; display:&&&iframe src=&about:blank& frameborder=&5px& scrolling=&yes& style=&width:100%; height:100%;&&&/iframe&&/div&';//alert($(this).attr('src'));imgstr = '&img id=&ImgZoomInImage& src=&' + $(this).attr('src')+'& onclick=$(/'#ImgZoomInImage/').hide();$(/'#ImgZoomInBG/').hide(); style=&cursor: display: position: z-index:10001;& /&';if ($('#ImgZoomInBG').length & 1) {$('body').append(bgstr);}if ($('#ImgZoomInImage').length & 1) {$('body').append(imgstr);}else {$('#ImgZoomInImage').attr('src', $(this).attr('src'));}//alert($(window).scrollLeft());//alert( $(window).scrollTop());$('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);$('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);$('#ImgZoomInBG').show();$('#ImgZoomInImage').show();};$(document).ready(function () {$(&#imgTest&).bind(&click&, function () {$(this).ImgZoomIn();});});&/script&&/head&&body&&div&&!--第一种写法--&&img class=&exampleImg& src=&images/03.jpg& id=&imgTest&/&&!--第二种写法--&&img class=&exampleImg& src=&images/p1_nav2.png& onClick=&$(this).ImgZoomIn();&/&&/div&&/body&&/html&
因为移动端无法添加热点,最终一个解决方法是使用四个a标签定位到左上角,右上角,左下角,右下角四个区域。
&dl& &dd style=&display:&&
&img src=&images/four-duche.jpg& onClick=&$(this).ImgZoomIn();&&
&a href=&javascript:;& src=&images/11.jpg& class=&topleft& onClick=&$(this).ImgZoomIn();&&&/a&
&a href=&javascript:;& src=&images/12.jpg& class=&topright& onClick=&$(this).ImgZoomIn();&&&/a&
&a href=&javascript:;& src=&images/13.jpg& class=&bottomleft& onClick=&$(this).ImgZoomIn();&&&/a&
&a href=&javascript:;& src=&images/14.jpg& class=&bottomright& onClick=&$(this).ImgZoomIn();&&&/a& &/dd& ...&/dl&css.topleft,.topright,.bottomleft,.bottomright{ width:50%; height:50%; position:}.topleft{ /*background-color:*/ top:0; left:0;}.topright{ /*background-color:*/ top:0; right:0;}.bottomleft{ /*background-color:*/ bottom:0; left:0;}.bottomright{ /*background-color:*/ bottom:0; right:0;}
PS:手机网站移动端图片实现延迟加载
由于国内的电信网络性价比的限制,和手机处理能力的差异,在设计一个无线应用的时候,
为用户节省流量是一个非常重要的考虑因素。可以说每一个字节都应该为客户端节省。
节约流量可以从以下几个方面关注:
一、使用缓存 比如 利用浏览器本地存储 前面已经讨论过
二、延迟加载代码 (触底检测,通过接口获取数据)
三、资源的延迟加载,图片出现在可视区域再加载,(不考虑自动播放的情况下)音频视频按用户点击加载。
今天简单说一下图片延迟加载的实现方式。
例子基于jQuery 和 jQuery mobile
原理:用户滑动屏幕,屏幕滚动结束(用jQuery 提供的 window scrollstop 事件合适 ) 检测出现在viewport中的图片。
替换图片的 真正 src 属性即可。
技巧:滚动结束之后不要立即检测加载,设置一秒延时,也许用户会立即开始下一次滚屏,基于现在的网络环境,1秒的延时可以说明用户真正想查看这些内容。用微信的朋友可以仔细体验一下这一点。
由于有时钟的控制,当用户频繁快速翻动屏幕,不会发大量请求。
var refreshTimer = null, mebook = mebook || {};/**滚动结束 屏幕静止一秒后检测哪些图片出现在viewport中*和PC端不同 由于无线速度限制 和手机运算能力的差异 1秒钟的延迟对手机端的用户来说可以忍受*/$(window).on('scrollstop', function () { if (refreshTimer) { clearTimeout(refreshTimer); refreshTimer = } refreshTimer = setTimeout(refreshAll, 1e3);});$.belowthefold = function (element) {
var fold = $(window).height() + $(window).scrollTop();
return fold &= $(element).offset().};$.abovethetop = function (element) {
var top = $(window).scrollTop();
return top &= $(element).offset().top + $(element).height();};/**判断元素是否出现在viewport中 依赖于上两个扩展方法 */$.inViewport = function (element) {
return !$.belowthefold(element) &;&; !$.abovethetop(element)};mebook.getInViewportList = function () {
var list = $('#bookList li'),
list.each(function (i) {
var li = list.eq(i);
if ($.inViewport(li)) {
mebook.loadImg(li);
});};mebook.loadImg = function (li) {
if (li.find('img[_src]').length) {
var img = li.find('img[_src]'),
src = img.attr('_src');
img.attr('src', src).load(function () {
img.removeAttr('_src');
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
基于JavaScript实现移动端点击图片查看大图点击大图隐藏Script相关信息，包括
的信息，所有基于JavaScript实现移动端点击图片查看大图点击大图隐藏Script相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International切片软件教程
手机：手机网站效果图切片html,div,css,js特效（跨平台按比例自适应）
发布时间：
手机网站效果图切片html,div,css,js特效（跨平台按比例自适应）
符合W3C,标准网页,兼容所有浏览器，常用特效制作，图片最小，支持css sprites减少请求，优化速度，免费编写特效（如滑动门、图片滚动动效果、背景定时切换、下拉菜单、滑动门导航+下拉菜单、图片切换效果、表单提交、表单验证、视频代码等等，大大减少网页制作的难度）
不同尺寸的手机屏幕均能保持原有设计风格，给用户一致的体验！
搜索关键词：divcss &切片 网站 建设
样式为DIV+CSS。切成HTML格式。
免费编写特效（如滑动门、图片滚动动效果、背景定时切换、下拉菜单、滑动门导航+下拉菜单、图片切换效果、表单提交、表单验证、视频代码等等，大大减少网页制作的难度）
有意者可以给直接联系店主。不在线也可发信息。
此类切片要求要已有的门户网源文件图，如：PSD、JPG等。
请上面发有评论或者提问，管理员将尽快回复您！用JS怎么样使图片点击时慢慢变大再点击时慢慢变小,并能实现来回点击多次
按时间排序
function chk(){
var obj =document.getElementById(&img&);
if(obj.width&=100){
obj.setAttribute(&width&,500);
obj.setAttribute(&width&,100);
} }&a href=&#&&&img id=&img& style=&border:0px& src=&./1.gif& onclick=&chk()&&&/a&
有相应控件，lightbox.........很多
简单点就是用图片的两个大小，然后判断当前图片名，显示大的名称加个b，显示小的就删掉b就可以了
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：