WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法
WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法 【WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法】最近有个需求是点击放大查看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;
}
推荐阅读
- EditText默认不获取焦点弹出键盘
- 分享!如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- whlie循环和for循环的应用
- OC:|OC: WKWebView详解
- WKWebview|WKWebview js 调用oc 和oc调用js
- 【实用教程】4种获取无水印视频素材的方法
- iOS|iOS runtime应用整理
- 插件化无法获取或找到.so文件
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板
- 获取知识的门槛