iOS WebView长按网页里的图片识别图片中的二维码和保存图片

简介: iOS WebView长按网页里的图片识别图片中的二维码和保存图片

Demo地址:KJWebDiscernDemo


前言


不需要和H5做交互实现长按识别网页当中的图片,然后配合识别二维码功能即可实现长按识别网页当中二维码操作,于是有了下面的工具长按识别网页图片

1.png

使用方法


/// 回调获取长按识别的图片
+ (void)kj_initWithWKWebView:(WKWebView*)webView QRCodeImageBlock:(KJQRCodeImageBlock)block;

实现代码

//
//  KJWebDiscernTool.m
//  KJWebDiscernDemo
//
//  Created by 杨科军 on 2019/10/11.
//  Copyright © 2019 杨科军. All rights reserved.
//
#import "KJWebDiscernTool.h"
@interface KJWebDiscernTool ()<UIGestureRecognizerDelegate>//,WKNavigationDelegate>
@property(nonatomic,copy,class) KJQRCodeImageBlock xxblock; /// 类属性block
@property(nonatomic,strong) WKWebView *saveWebView;
@property(nonatomic,strong) UIImage *currentImage;
@end
@implementation KJWebDiscernTool
static KJQRCodeImageBlock _xxblock = nil;
static KJWebDiscernTool *kj_tool = nil;
+ (KJQRCodeImageBlock)xxblock{
    if (_xxblock == nil) {
        _xxblock = ^void(UIImage *image){ };
    }
    return _xxblock;
}
+ (void)setXxblock:(KJQRCodeImageBlock)xxblock{
    if (xxblock != _xxblock) {
        _xxblock = [xxblock copy];
    }
}
+ (void)kj_initWithWKWebView:(WKWebView*)webView QRCodeImageBlock:(KJQRCodeImageBlock)block{
    self.xxblock = block;
    @synchronized (self) {
        if (kj_tool == nil) {
            kj_tool = [[KJWebDiscernTool alloc]init];
        }
    }
    [kj_tool kj_configWithWKWebView:webView];
}
- (void)kj_configWithWKWebView:(WKWebView*)webView{
    self.saveWebView = webView;
//    self.saveWebView.navigationDelegate = self;
    UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
    longPress.minimumPressDuration = 1;
    longPress.delegate = self;
    [webView addGestureRecognizer:longPress];
}
- (void)handleLongPress:(UILongPressGestureRecognizer *)sender{
    if (sender.state != UIGestureRecognizerStateBegan) return;
    CGPoint touchPoint = [sender locationInView:self.saveWebView];
//    UIImage *image = [self kj_getWebImageWithTouchPoint:touchPoint];
//    if (self.currentImage == nil || self.currentImage != image) {
//        self.currentImage = image;
//    }
//    _xxblock(self.currentImage);
    __weak typeof(self) weakself = self;
    // 获取长按位置对应的图片url的JS代码
    NSString *imgJS = [NSString stringWithFormat:@"document.elementFromPoint(%f,%f).src", touchPoint.x, touchPoint.y];
    // 执行对应的JS代码 获取url
    [self.saveWebView evaluateJavaScript:imgJS completionHandler:^(id _Nullable imgUrl, NSError * _Nullable error) {
        if (imgUrl) {
            NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:imgUrl]];
            weakself.currentImage = [UIImage imageWithData:data];
        }
        _xxblock(weakself.currentImage);
    }];
}
///// 用工厂方法如何return block里的值 - 同步处理
//- (UIImage*)kj_getWebImageWithTouchPoint:(CGPoint)touchPoint{
//    __block UIImage *image = NULL;
//    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
//    dispatch_semaphore_t sem = dispatch_semaphore_create(0);//创建信号量初始值为0  0:表示无限等待
//    __weak typeof(self) weakself = self;
//    dispatch_group_async(dispatch_group_create(), queue, ^{
//        // 获取长按位置对应的图片url的JS代码
//        NSString *imgJS = [NSString stringWithFormat:@"document.elementFromPoint(%f,%f).src", touchPoint.x, touchPoint.y];
//        // 执行对应的JS代码 获取url
//        [weakself.saveWebView evaluateJavaScript:imgJS completionHandler:^(id _Nullable imgUrl, NSError * _Nullable error) {
//            if (imgUrl) {
//                NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:imgUrl]];
//                image = [UIImage imageWithData:data];
//            }
//            dispatch_semaphore_signal(sem); //发送信号量 信号量+1
//        }];
//    });
//    dispatch_semaphore_wait(sem, DISPATCH_TIME_FOREVER);//阻塞等待 信号量-1
//    return image;
//}
#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    return YES;
}
//#pragma mark - WKNavigationDelegate
//// 页面加载完成之后调用
//- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
//    /// 禁止弹出菜单
//    [self.saveWebView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout = 'none';" completionHandler:nil];
//    // 禁止选中 - 禁止用户复制粘贴
//    [self.saveWebView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect = 'none';" completionHandler:nil];
//}
@end


在配合识别二维码工具就可实现长按识别图中二维码


GitHub地址:KJScanDemo


长按识别介绍就到此完毕,后面有相关再补充,写文章不容易,还请点个**小星星**传送门

相关文章
|
6月前
|
JSON JavaScript 安全
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
59 1
|
iOS开发
iOS TextView插入表情或者图片后字体变大或变小
iOS TextView插入表情或者图片后字体变大或变小
111 1
|
6月前
|
存储 缓存 安全
基于iOS平台的高效图片缓存策略实现
【4月更文挑战第22天】 在移动应用开发中,图片资源的加载与缓存是影响用户体验的重要因素之一。尤其对于iOS平台,由于设备存储空间的限制以及用户对流畅性的高要求,设计一种合理的图片缓存策略显得尤为关键。本文将探讨在iOS环境下,如何通过使用先进的图片缓存技术,包括内存缓存、磁盘缓存以及网络请求的优化,来提高应用的性能和响应速度。我们将重点分析多级缓存机制的设计与实现,并对可能出现的问题及其解决方案进行讨论。
|
6月前
|
存储 缓存 算法
实现iOS平台的高效图片缓存策略
【4月更文挑战第22天】在移动应用开发中,图片资源的处理是影响用户体验的重要因素之一。特别是对于图像资源密集型的iOS应用,如何有效地缓存图片以减少内存占用和提升加载速度,是开发者们面临的关键挑战。本文将探讨一种针对iOS平台的图片缓存策略,该策略通过结合内存缓存与磁盘缓存的机制,并采用先进的图片解码和异步加载技术,旨在实现快速加载的同时,保持应用的内存效率。
|
6月前
|
存储 缓存 编解码
实现iOS平台的高效图片缓存策略
【4月更文挑战第23天】在移动应用开发领域,尤其是图像处理密集型的iOS应用中,高效的图片缓存策略对于提升用户体验和节省系统资源至关重要。本文将探讨一种针对iOS平台设计的图片缓存方案,该方案通过结合内存缓存与磁盘缓存的多层次结构,旨在优化图片加载性能并降低内存占用。我们将深入分析其设计理念、核心组件以及在实际场景中的应用效果,同时对比其他常见缓存技术的优势与局限。
|
6月前
|
存储 Web App开发 Android开发
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
620 1
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
|
5月前
|
Android开发 UED Kotlin
kotlin webview 加载网页失败后如何再次重试
在Kotlin中,当使用WebView加载网页失败时,可通过设置WebViewClient并覆盖`onReceivedError`方法来捕获失败事件。在该回调中,可以显示错误信息或尝试使用`reload()`重试加载。以下是一个简要示例展示如何处理加载失败
|
5月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
5月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
85 1