首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Android Webview Onclick on Image中仅缩放图像?

在Android WebView中,可以通过设置WebViewClient的onPageFinished方法来实现在点击图片时仅缩放图像。具体步骤如下:

  1. 创建一个自定义的WebViewClient类,并重写onPageFinished方法。
代码语言:txt
复制
private class MyWebViewClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        
        // 在页面加载完成后,为WebView中的图片添加点击事件
        view.loadUrl("javascript:(function(){" +
                "var imgs = document.getElementsByTagName('img');" +
                "for(var i=0;i<imgs.length;i++){" +
                "imgs[i].onclick=function(){" +
                "window.android.onImageClick(this.src);" +
                "}" +
                "}" +
                "})()");
    }
}
  1. 在Activity中,设置WebView的WebViewClient为自定义的MyWebViewClient,并实现一个JavaScript接口供WebView调用。
代码语言:txt
复制
WebView webView = findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());

// 实现一个JavaScript接口供WebView调用
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void onImageClick(String imageUrl) {
        // 在这里处理图片点击事件,例如缩放图像
        // ...
    }
}, "android");
  1. 在HTML页面中,为图片添加点击事件的JavaScript代码。
代码语言:txt
复制
<img src="image.jpg" onclick="window.android.onImageClick(this.src);">

通过以上步骤,当用户点击WebView中的图片时,会触发JavaScript代码中的onImageClick方法,并将图片的URL作为参数传递给Android端的onImageClick方法。在onImageClick方法中,可以进行图像的缩放等操作。

推荐的腾讯云相关产品:腾讯云移动浏览器(Tencent Mobile Browser),该产品是腾讯云提供的一款移动浏览器,支持Android平台,可以用于展示网页内容并提供丰富的Web功能。产品介绍链接地址:https://cloud.tencent.com/product/tmb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android使用webView长按保存下载网络图片

本文实例为大家分享了Android使用webView长按保存下载网络图片的具体代码,供大家参考,具体内容如下 最近发现在webView的setOnLongClickListener可以获取到WebView.HitTestResult...通过判断Type的类型获取点击图片的url,然后把图片下载到本地,发送广播通知系统图库进行更新,在系统图库查看下载的图片。...运行Demo在网页对图片做长按点击即可下载网络图片 直接上代码: 下面附有Demo下载:点击打开链接 package demo.sam.webview_demo; import android.app.Activity...webView.getHitTestResult(); // 如果是图片类型或者是带有图片链接的类型 if(hitTestResult.getType()== WebView.HitTestResult.IMAGE_TYPE...|| hitTestResult.getType()== WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE){ // 弹出保存图片的对话框 AlertDialog.Builder

1.4K51
  • Android WebView图片浏览及缩放效果

    本文实例为大家分享了Android WebView图片浏览及缩放效果展示的具体代码,供大家参考,具体内容如下 ?...此工程用到了两个开源库: PhotoView支持图片的缩放 Android-Universal-Image-Loader图片的异步加载 (android studio)将两个源工程的library...文件夹导入到Demo Module所在的Project,修改各自的build.gradle文件,让里面的版本号、所用的android包等与Demo Module相同即可。...(WebView view, String url) { //点击webView的键接,依然在此webview显示,而不跳转到别的浏览器 webview.loadUrl(url); return super.shouldOverrideUrlLoading...//为每个图片设置点击事件,objs[i].onclick webview.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName

    1.1K10

    Android点击WebView实现图片缩放及滑动浏览效果

    最近做的项目有一个要求,就是在WebView显示的html,需要在点击其中的图片时进行放大,并进行缩放和滑动 浏览,我第一想到的是这是和js进行交互的事情,但是怎么获取html图片的url,并保存起来进行显示...,我就不知道 了,所以去查了下资料,最后找到了解决的办法: 博客地址:Android WebView图片浏览及缩放效果 首先说一下处理这个要求的思路,首先我们要获取到html的所有图片的url...,并保存到集合,当点击图片时,跳转 一个Activity用ViewPager进行显示,这样就实现了滑动浏览的效果,至于图片的缩放我们则需要用到第三的开源 库PhotoView....//为每个图片设置点击事件,objs[i].onclick webView.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName...isLocked && super.onTouchEvent(event); } } 相关布局文件: MainActivity布局只有一个简单的webView; ViewPagerActivity

    1.9K10

    WebView完全解读

    官方文档 Building Web Apps in WebView 常用类: 列举日常开发中常用的几个类和常用方法,其余请自行查阅官方API。...遵循android内存管理机制。 * exit():结束当前组件Activity,并立即释放当前Activity所占资源。...内侧显示 setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)//滚动条在WebView外侧显示 设置缩放以及自适应屏幕 WebView 只需要开启设置相关属性就可以支持缩放...settings.setDisplayZoomControls(false); 自行设置初始的缩放比例: webView.setInitialScale(25);//为25%,最小缩放等级,整个网页缩放...的一些注意事项 从Android 4.4开始,AndroidWebView不再是基于WebKit的,而是开始基于Chromium,这个改变 使得WebView的性能大幅提升,并且对HTML5,CSS

    3.3K10

    首个hybird商业项目踩坑总结

    该系列引用了《Android开发艺术探索》以及《深入理解Android 卷Ⅰ,Ⅱ,Ⅲ》的相关知识,另外也借鉴了其他的优质博客,在此向各位大神表示感谢,膜拜!!!...的基本信息 除去WebView外,在开发我们还经常用到其他的WebView工具类 WebSettings 对WebView进行配置和管理 //如果访问的页面要与Javascript交互,则webview...若为false,则该WebView不可缩放 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件 //其他细节操作 webSettings.setCacheMode...原因何在呢?因为Android WebView是不能直接打开文件选择弹框的。...尽管有了上述的一些优化,不过原生WebView的一些不足,兼容性、流量消耗、以及性能等诸多方面还是不能达到要求,不过腾讯提供的X5WebView算是目前比较好的解决方案了,关于X5WebView详情读者看参看腾讯官网腾讯浏览服务

    1.2K10

    android webview加载html图片自适应手机屏幕大小&点击查看大图

    我们在开发,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要左右移动来查看全图...下面给出几种实用方法,达到在手机端用webview展示html的图片,能自适应手机屏幕展示。...需要用webview控件进行展示html文本,为使文字也自适应手机屏幕大小,需要先对android webview控件的属性进行相应设置,这里bindingView.contentWv代表webview...(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html的内容放大webview等宽的一列 webSettings.setJavaScriptEnabled...(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html的内容放大webview等宽的一列webSettings.setJavaScriptEnabled

    6.4K10

    Android hybrid_android混合开发

    "/> 在相应的.java文件通过id获取webview组件,将Android方法存入一个对象,通过addJavascriptInterface()方法,暴露给html页面。...在java文件创建一个供网页端调用的类,JSObject,里面编写供网页调用的方法. 一般h5页面常要调用Android摄像头,相册,还有自定义方法。...MyJS可以看成是JSObject类在网页的别名,下面会使用webview的addJavascriptInterface()方法将它们关联起来。 <!...webSettings.setBlockNetworkImage(true); //显示WebView提供的缩放控件 webSettings.setDisplayZoomControls(true);...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.3K20

    如何优雅的对Webview进行截屏?

    这种方式可以获取webview已加载的所有数据图像,也就是长截屏的效果。这种方式在Android 4.4以下是没有问题的,但是在5.0以上就行不通了。...但是此时在5.0+上会发现,截取的快照只显示了webview显示出来的那部分,没有显示出来的部分是空白的。...通过google找到了原因,在5.0+版本上,Androidwebview做了优化,旨在减少内存占用以提高性能。...因此在默认情况下会智能的绘制html需要绘制的部分,其实就是当前屏幕展示的html内容,因此会出现未显示的图像是空白的。解决办法是调用enableSlowWholeDocumentDraw()方法。...这里需要注意的是在传递webview的高度时,是通过缩放率计算的,这样就会算出绘制整个已加载的html内容所需的高度。如果没有这个缩放率,那么得到的快照就仅仅是这个html内容最上面的那一段。

    2.2K20

    WebApp开发-Google官方教程

    WebView呈现的页面 如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用,你需要仔细考虑在不同设备上你的页面看起来是怎样的。...Android浏览器和WebView通过缩放页面来适应不同屏幕分辨率,这样所有的设备都是以默认大小即中分辨率的大小来展示web页面的。...如果在你的web页面图像是很重要的一部分,那么你就需要密切关注在不同分辨率下发生的缩放,因为图像缩放可能会带来模糊以及像素化的问题。...Android Browser和WebView默认屏幕为像素密度。...因为默认target density是像素密度,因此当用户拥有一个低像素或者高像素密度的屏幕时,Android Browser和 WebView缩放页面,以便它们能在中等像素密度的屏幕以合适的大小展示

    97820

    AndroidWebView的基本配置与填坑记录大全

    前言 在应用程序开发过程,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复。...但是在Android开发,由于Android版本分化严重,每一个版本针对webview都有部分更改,因此在开发过程中会遇到各种各样的坑,下面这篇就来给大家介绍关于AndroidWebView的基本配置与填坑记录...; // 支持缩放,默认为 true webSettings.setBuiltInZoomControls(true); // 设置内置的缩放控件,若为 false,则该 WebView 不可缩放 webSettings.setDisplayZoomControls...3、Https 和 Http 混合模式 从 Android 5.0 开始,WebView 默认不支持同时加载 Https 和 Http 资源。...11、另外很多人 不知道webview 实际上有自己一套完整的cookie机制的,利用好这个 可以大大增加对客户端的访问速度。 image.png 实际上cookie就是存放在这个表里的。

    2.7K20

    Android使用WebView实现全屏切换播放网页视频功能

    ,点击切换横屏" android:gravity="center" / <WebView android:id="@+id/video_webview" android...启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像 * setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式...setLightTouchEnabled 设置用鼠标激活被选项 * setSupportZoom 设置是否支持变焦 * */ ws.setBuiltInZoomControls(true);// 隐藏缩放按钮...videowebview.setWebViewClient(new xWebViewClientent()); } class Listener implements OnClickListener { @Override public void onClick...|keyboardHidden|screenSize” 总结 以上所述是小编给大家介绍的Android使用WebView实现全屏切换播放网页视频功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言

    2.3K10
    领券