如何点开webview里面的图片实现放大缩小查看?

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

            加这段js进去不好使
0

1个回答

webview.setVerticalScrollbarOverlay(true); //指定的垂直滚动条有叠加样式

WebSettings settings = webview.getSettings();

settings.setUseWideViewPort(true);//设定支持viewport

settings.setLoadWithOverviewMode(true);

settings.setBuiltInZoomControls(true);

settings.setSupportZoom(true);//设定支持缩放

html界面meta标签

例如:-->设定支持缩放,最大两倍缩放

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Androd WebView中的图片浏览及缩放
点击webView中的图片,进行浏览及缩放 n n此工程用到了两个开源库: nPhotoView支持图片的缩放 nAndroid-Universal-Image-Loader图片的异步加载 n(android studio)将两个源工程中的library文件夹导入到Demo Module所在的Project中,修改各自的build.gradle文件,让里面的版本号、所用的android包等与Demo
Android JavaScript打开webview图片、支持放大缩小
Android JavaScript打开webview图片、支持放大缩小查看图片
Android中实现WebView点击图片放大显示
Android中实现WebView点击图片放大显示,完整代码demo。
实现类似于微信大图查看器的放大缩小功能
scrollview本身具有放大缩小的功能,我们利用scrollview来实现。创建好scrollview之后,将imageview放到scrollview上nn另外微信的图片查看器还有一个从小图的位置开始放大的功能,我们通过改变大图做放大缩小动画时候的初始的坐标n来实现它
android Webview读取网页里的所有图片,并实现图片集观看,图片缩放
webview实现点击图片,图片集播放,实现图片缩放
基于webview的安卓app图片支持手势缩放,双击放大,缩小
这是我的第一篇博客,写的不好请大家见谅,能帮到你是最好的,不能帮到你请你也了解一下rn      我们的安卓程序有时候是基于webview用js和h5来编写的,那么图片支持双击放大、缩小是可以做到的;但是手势缩放往往会束手无策,接下来我有一个特别简单的方法,只需要导进去一个js插件就行啦。rn                      https://github.com/webjyh/MPrev
Android Webview滑动监听
Android Webview 滑动监听 放大缩小查看网页图片
iOS UIWebview加载网页时的图片放大,缩小,保存到相册,文字的拷贝
//---缩放nn    _webView.autoresizingMask = (UIViewAutoresizingFlexibleWidthn | UIViewAutoresizingFlexibleHeight);nn    _webView.scalesPageToFit=YES;nn    _webView.multipleTouchEnabled=YES;
webview与javascript交互实现图片点击缩放预览功能,修复部分机型(华为mate9)webview自动添加图片点击功能
先说下我在使用X5Webview中碰到的一个bug:在华为Mate9  Android8.0.0手机上webview会自动给Html中的图片添加上点击缩放事件。本来这也没什么,但是因为我项目中本来就要实现这个功能,导致图片会被打开两次,体验很不好,目前没在别的手机上发现相同的问题。nn解决思路:先去掉自动添加的图片点击事件,然后再自己使用webview和js交互实现图片的点击缩放预览功能nn先贴出...
andriod 利用WebView实现 图片放大缩小以及移动[转]
抛弃以前用ImageView的陈旧观念吧。rn rn利用WebView加载本地图片,仅需两步,马上完成。rn rnString imgpath=&quot;.../test.jpg&quot;;rnWebView vb=(WebView)findViewById(R.id.mywebview);rnvb.getSettings().setBuiltInZoomControls(true);rnvb.loadURL(i...
Android 实现WebView点击图片查看大图列表及图片保存
在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片。本问将就这一系列问题的实现进行说明。nnn项目的知识点:n1.加载网页后如何捕捉网页中的图片点击事件;n2.获取点击的图片资源后进行图片显示,获取整个页面所有的图片;n3.支持查看上下一张的图片以及对图片缩放显示;n4.对图片进行保存;
android webview js交互, 响应webview中的图片点击事件 ,点击(双击)使图片变大,单击退出
最近碰到个新需求需要点击webview中的图片进行放大显示。rn整理了下思路,想到了下面的一个可行的方案。rnhttp://download.csdn.net/detail/zlb_lover/9654404 代码下载地址rnrnrnrn方案思路,rn1.在点击图片的时候调用本地的java方法并给出响应的图片地址rn2.本地获得图片地址后,开启一个遮罩activity进行显示和处理rnrnrn第二
微信公众号网页上点击放大图片浏览,解决方案
1、 引用微信的JS<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>2、初始化点击放大监听方法(加载完成后调用此方法) /*调用微信预览图片的方法*/n function funcReadImgInfo(){n var imgs = [];
iOS-获取UIWebView或者WKWebView页面的左右图片链接,点击查看大图
导入JSn- (void)webViewDidFinishLoad:(UIWebView *)webView{n //这里是js,主要目的实现对url的获取 bodyn static NSString * const jsGetImages =n @"function getImages(){\n var objs = document.querySelectorAll
微信朋友圈的实现(图片查看,手势放大、缩小)
效果图: n n简单的就这样,实现效果的方法有多种,可以使用ListView嵌套GridView,也可以直接使用RecycleView,这里只说RecycleView的实现方法。 n难一点的地方就是每个item添加图片,这里使用的是自定义LinearLayout,LinearLayout里面主要做图片点击处理,设置图片布局,行数列数的排列。代码不多,直接贴代码了:npublic class Mult
html图片点击缩放
第一种方法nnn&amp;lt;!doctype html&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;n &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;n &amp;lt;script type=&quot;text/JavaScript&quot;&amp;gt;n window.on
android scrollview内实现图片的手势缩放
rn图片是一张长图,在scrollview内上下滑动图片的同时,增加了对图片的手势放大或缩小的操作。rn rn之前将手势缩放的布局放在scrollview内总是会发生手势冲突,这个不会,可以找张图片试试。rn rn主界面的activity:rn rnpackage test;rnimport com.agehua.drag.R;rnrnimport android.app.Activity; rn...
h5中的图片点击放大
在wkwebview的代理方法rn//MARK: -- 加载完成rn- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation 中加入js代码rnrn//js方法遍历图片添加点击事件 返回图片个数rn     逻辑:rn     1.遍历获取全部的图片;(只获取detail-main div
Android webView点击图片放大效果之坑
在网上copy的代码  根本交互不了java代码 挣扎了一天才发现 这句代码有坑 rn  window.imagelistner.openImage(this.src);rnrn 试过window.open 也不行 报错, js语法忘记太多也是硬伤rn  imagelistner.openImage(this.src);rn 改成这样就可以了,不知道是不是我虚拟机调试的缘故,rn因为网上demo很
仿微信朋友圈图片点击浏览和关闭时的图片缩放的过渡动画。
首先上效果图上图功能具体思路是一个activity跳转,跳转到一个新的页面查看图片,中间加了一个缩放的过渡动画。 要实现这种,我们要先去掉activity的跳转动画startActivity(intent);n//取消activity动画noverridePendingTransition(0, 0);然后就是属性动画的运用 要实现这种需要获得动画的初始位置,也就是第一个activity里的ima...
iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
最近项目某个模块中要求可以实现对网页中图片的查看,并要求在多张图片的情况下可以实现滑动浏览。rnrn所以,问题的集中点就是如何获取所有的图片地址及添加图片的点击事件。不多说,直接上码!rnrnrnrnrn在网页加载完成时,通过js获取图片和添加点击的识别方式rnrnrnrnrn- (void)webViewDidFinishLoad:(UIWebView *)webView {rnrn    [I
vue点击图片预览放大(可旋转、翻转、缩放、上下切换、键盘操作)
https://blog.csdn.net/guozhangqiang/article/details/82251893n因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换。当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不甘心,就在GitHub找找找.........还真找到一个适合vue的插件,叫...
jQuery——小案例:点击图片放大缩小
需求:nHTML中有三张图片:n如果图片处于“大”状态,则点击图片可以缩小。n如果图片处于“小”状态,则点击图片可以放大。n代码:nnn n n 改变图片n n n function chg(e) {n var $img = $(e.srcElement || e.target); //添加对 IE的支持,并封装为JQuery对象n if($img.attr(
移动端滑动查看大图,支持手指缩放,上下一张
移动端相册代码,点击可查看大图,上一张下一张,可修改标题,支持手指缩放图片
实现SVG图片放大缩小及拖动功能
实现SVG图片的Pan and Zoom 功能
android 关于WebView点击图片展示大图
最近因为项目的需要 在加载webview的时候如果有图片展示点击能够查看大图,刚开始百思不得其解,后来经过多方的努力得以实现。 n这一行代码是为了重写js交互 n webView.setWebViewClient(new MyWebViewClient(context, webView, layout_loding)); n能够实现这样的功能 无外乎有两步 第一能够识别JS的语言 例如上面这段J
前端jquery实现图片点击放大缩小
利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕 的高度)。rnjs部分:rnrnfunction clickToBigImg(){//绑定图片函数n //var clickImgId = $(this).attr("i
angularjs点击图片放大显示,点击关闭缩小显示
HTML代码nnnnn&lt;ul class="clearfix"&gt;n &lt;li&gt;n &lt;h3&gt;身份证正面照片&lt;/h3&gt;n &lt;div&gt;n &lt;img ng-click="changePic($event)" ng-src="showImg/{{personInfos.dealer.idCardFace}}"...
android Webview读取网页里的所有图片,并实现点击放大
Webview读取网页里的所有图片,并实现点击放大,图片集观看,图片缩放
点击ImageView放大阅览图片
一行代码搞定点击图片放大,阅览图片
Android 实现WebView点击图片查看大图列表及图片保存功能
看到一篇好的实现WebView点击图片查看大图列表及图片保存功能的文章,记录一下:nnhttps://www.jb51.net/article/106272.htm
Android实现WebView图片缓存,替换加载前默认图片的样式
实现Android中WebView图片的缓存,并且实现如何替换WebView中默认图片以及如何实现图片的点击。
移动端查看预览图片放大缩小
方法一n之前介绍过一款 移动端vue适用的插件大全。里边有一篇是查看图片放大缩小的 http://vue.ydui.org/docs/#/lightbox,自行去里边进行知识学习。n方法二n采用微信自带的点击查看预览图片,并且放大缩小n实现方法:n1.先在全局引入 微信的jsn &lt;script type="text/JavaScript" src="http://res.wx.qq.com/...
【android】可放大缩小图片位置点击位置获取
直接上代码。rn[code=&quot;xml&quot;]rn rn rnrn rnrnrn rnrn rn rnrn rn rnrn[/code]rn在imageview外层加上ScrollView和HorizontalScrollView主要是为了图片在放大的时候使用,rnrnrn[code=&quot;java&quot;]package...
Android开发中图片的放大缩小功能的实现(总结)
先上代码吧,之后再进行补充和代码优化。activity_main.xml的代码如下:&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;n&amp;lt;LinearLayoutn android:layout_width=&quot;match_parent&quot;n android:layout_height=&quot;match_parent&quot;n android:ori...
ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽
ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽以下内容需要一定的ExtJs以及Js知识基础 nExtJs 完美实现图片在Window中通过鼠标滚轮放大缩小以及点击拖拽以下内容需要一定的ExtJs以及Js知识作为基础,不过我会尽量详细解释。Ext.define('window.ViewPicWin',{//定义一个类继承window 所有配置都在该类里 包括图片地址等
Qt实现长图片的放大缩小以及动态显示
这篇文章是在这个基础上进行讨论的谈一谈分别利用opencv、Qt、matlab动态显示图片的实现nn其实就是想找一种更加合适的方法进行图片的放大缩小以及动态显示。nn这个是效果图nnnn nn我把项目命名为Qtmline,因为之前做了和Qtimeline有关的东西nnnn我们关心的是header files和source files里的文件nn先说header files里的pixitem.h,放...
效果很好的winform图片查看器(包含拖拽移动缩放)
分享网友做的效果很好的winform图片查看器,主要包含拖拽移动缩放,我也是找了很久才找到的。
ImageView+ViewPager+PhotoView实现朋友圈图片点击全屏查看支持放大缩小
项目DEMO地址:http://download.csdn.net/detail/wxk105/9562369效果图点击滑动效果图点击放大效果图mainActivity项目简单只在必要处做声明,完整demo见结尾链接,看不懂请加Q164454216,验证:博客public class MainActivity extends AppCompatActivity {n private List<
jQuery仿QQ空间图片查看特效(全屏,放大,缩小,旋转,镜像,鼠标滚轮缩放)
<!DOCTYPE html>n<html> <head>n <meta charset="utf-8">n <link rel="stylesheet" href="dist/viewer.min.css" />n <script type="text/javascript" src="assets/js/jquery.min.js"></scrip
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 大学里面的java班 如何实现云计算