最近有个需求是点击放大查看H5内容页面的图片,寻找到一个比较轻量的库YHPhotoBrowser,其中根据图片位置来缩放的动画需要传递一个图片所在屏幕里的位置CGRect,想获取H5的图片坐标那就需要JS注入了

- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer {

CGPoint touchPoint = [recognizer locationInView:self.webView];

NSString *jsString = [NSString stringWithFormat:@"function getURLandRect(){\

var ele=document.elementFromPoint(%f, %f);\

var url=ele.src;\

var left=ele.getBoundingClientRect().left;\

var top=ele.getBoundingClientRect().top;\

var width=ele.getBoundingClientRect().width;\

var height=ele.getBoundingClientRect().height;\

var jsonString= `{\"url\":\"${url}\",\"left\":\"${left}\",\"top\":\"${top}\",\"width\":\"${width}\",\"height\":\"${height}\"}`;\

return(jsonString)} getURLandRect()", touchPoint.x, touchPoint.y];

[self.webView evaluateJavaScript:jsString completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSDictionary *resultDic = [SmallTools convertToDictionary:(NSString *)result];

NSString *imageURL = [SmallTools isNullToString:resultDic[@"url"]];

if (imageURL.length == 0 || [imageURL isEqualToString:@"undefined"]) {

return;

}

CGFloat imgX = [resultDic[@"left"] floatValue];

CGFloat imgY = [resultDic[@"top"] floatValue] + NAV_HEIGHT + 5;

CGFloat imgW = [resultDic[@"width"] floatValue];

CGFloat imgH = [resultDic[@"height"] floatValue];

self.photoView = [[YHPhotoBrowser alloc]init];

self.photoView.sourceView = self.view; //图片所在的父容器

self.photoView.urlImgArr = @[imageURL]; //网络链接图片的数组

if (imgX && imgY && imgW && imgH) { //原图片所在屏幕位置

self.photoView.sourceRect = CGRectMake(imgX, imgY, imgW, imgH);

}

self.photoView.indexTag = 0; //初始化进去显示的图片下标

[self.view addSubview:self.photoView]; //叠加在当前VC上

}];

}

这个JS方法document.elementFromPoint(%f, %f)根据传入的点返回该点最上层的对象,通过src找到图片的链接,然后getBoundingClientRect()方法能返回对象的八个属性left, top, right, bottom, x, y, width, height,根据需要获取相应属性构造原图的CGRect即可

这里附带一下判断NSString合法性以及JSON字符串转NSDictionary的工具方法

+ (NSString *)isNullToString:(id)string {

if ([string isEqual:@"NULL"] || [string isKindOfClass:[NSNull class]] || [string isEqual:[NSNull null]] || [string isEqual:NULL] || [[string class] isSubclassOfClass:[NSNull class]] || string == nil || string == NULL || [string isKindOfClass:[NSNull class]] || [[string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] length]==0 || [string isEqualToString:@""] || [string isEqualToString:@"(null)"]) {

return @"";

} else {

return (NSString *)string;

}

}

+ (NSDictionary *)convertToDictionary:(NSString *)jsonStr {

NSData *data = [jsonStr dataUsingEncoding:NSUTF8StringEncoding];

NSDictionary *tempDic = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

return tempDic;

}

html5获取图形坐标,WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法...相关推荐

  1. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...

  2. android 如何保存网页图片格式,求助,如何在安卓app内嵌的H5页面里长按保存图片?...

    最近要做个在H5页面里长按保存图片的功能,已经找了个第三方插件html2canvas解决了在浏览器和在ios app的长按保存,但是这个插件在android app里失效了,所以得单独处理androi ...

  3. html 怎么编写飞机移动,如何运用CSS3轻松实现H5页面里的飞行动画

    原标题:如何运用CSS3轻松实现H5页面里的飞行动画 随着h5页面的宣传优势,越来越的企业做活动开始追求移动端的展示效果 像下图这样一个h5页面首屏,我们如果给元素添加了动画之后,看上去是不是活跃了许 ...

  4. html5 ios cookie,ios – WKWebView,获取所有cookie

    我想从WKWebView获取所有cookie.为什么?我已经启动了一个使用基于Web的身份验证的项目.因此,我应该拦截cookie以确保用户已登录并用于其他目的.另一种情况 – 想象一下,如果用户登录 ...

  5. 防qq页面多边形html5,高仿QQ Xplan的H5页面

    上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成 除了手机端的media控制 ...

  6. js 跳转到指定位置 高德地图_在H5页面内通过地址调起高德地图实现导航

    项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...

  7. linux用命令下载图片,Linux命令行中采集指定页面的图片地址及图片下载

    获取指定页面中的图片地址: curl news.baidu.com | grep -Eio '(http|ftp|https)://[A-Za-z0-9_./]+(.jpg|.png|.gif)' 复 ...

  8. HTML基础-05-图片(引用图片src=“图片地址“、图片位置 align=“位置“、浮动图片 style=“float:位置“、图片链接 href=“目标url“、图形映射)

    文章目录 1. 引用图片(src="图片地址") 语法示例 完整示例 2. 图片的位置(align="位置") 语法示例 完整示例 3. 浮动图片(style= ...

  9. uniapp实现微信公众号内h5页面自定义标题内容和图片

    和上次一样填坑,这次是使用uniapp做的项目,下载微信的 js-sdk(1.6.0版本) cnpm install jweixin-module -S wechatShare.js var wx = ...

最新文章

  1. PPTPD服务端搭建
  2. STL 源代码剖析 算法 stl_algo.h -- equal_range
  3. ARMCM3汇编指令
  4. 程序员的.NET时代
  5. Linux用户和用户组和文件权限介绍
  6. silverlight将字符串转化为控件
  7. 拓端tecdat|R语言拟合扩展的Rasch模型分析试题质量
  8. springboot 返回输出流_Spring Boot 静态资源处理,妙招
  9. 微信小程序——样式覆盖
  10. CUPS学习三:CUPS主要模块介绍。
  11. c++20中的span
  12. react-native <0.69 Exceptions.h:5:10: fatal error: ‘fbjni/fbjni.h‘ file not found
  13. 2021程序员必看面试指南-进大厂年薪百万需要付出多少努力?你看看你们配吗......
  14. Zigbee 设置信道,PANID,发射功率现对z-stack里几个网络参数的设置以及如何获取总结一下。
  15. vivo手机便签如何快速彻底一键换机使用?
  16. 房源分页展示和实现webuploader上传图片
  17. linux lo回环接口与127.0.0.1
  18. linux学习第七章使用RAID和LVM磁盘阵列技术
  19. 3D游戏建模这个行业真的有这么糟糕吗?前景怎么样?入行薪资?35岁以后怎么办?
  20. WMS 智能分拣系统的种类及发展趋势

热门文章

  1. 虚拟化精华问答 | 为什么云计算需要虚拟化?
  2. 部分最小二乘回归分析matlab,MATLAB如何用偏最小二乘回归法做预测?跪求大神帮忙 - 程序语言 - 小木虫 - 学术 科研 互动社区...
  3. python实现Gabor滤波器-skimage(一)
  4. MFC界面 插入透明图片(logo)
  5. 史上超全!Docker命令全集,值得收藏!
  6. JAVA WEB3J与ganache以太坊环境交互
  7. Vue.js实现简单的按钮点击改变css样式
  8. java智力拼图小游戏
  9. 渗透测试-----9-拒绝服务(黑客其它的攻击方式)
  10. 游戏经济系统——体系设计002