自定义 UIWebview 添加长按保存图片等操作

思路：safari 自带了长按保存的功能，分析这个功能的特点： 长按一个图片，保存后的图片就是所点击的图片，做到了精确定位。JS可以处理精确定位的问题，使用UIWebview 和 JS 能够解决我们的问题。

直接上代码

UIWebView *aWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
    aWebView.delegate = self;
    aWebView.scalesPageToFit = YES;
   
    self.mainWebView = aWebView;
    [self.view addSubview:aWebView];
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://image.baidu.com/"] cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:20];
    [self.mainWebView loadRequest:request];
   
    UILongPressGestureRecognizer *longtapGesture = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longtap:)];
    [self.view addGestureRecognizer:longtapGesture];

添加webview，添加长按手势，看起来没有什么。

-(void)longtap:(UILongPressGestureRecognizer * )longtapGes{
   
    if (longtapGes.state == UIGestureRecognizerStateBegan) {
        CGPoint pt = [longtapGes locationInView:self.view];
        pt= [self.mainWebView convertPoint:pt fromView:nil];
       
        CGPoint offset  = [self.mainWebView.scrollView contentOffset];
        CGSize viewSize = [self.view frame].size;
        CGSize windowSize = [self.view frame].size;
       
        CGFloat f = windowSize.width / viewSize.width;
        pt.x = pt.x * f + offset.x;
        pt.y = pt.y * f + offset.y;
       
        [self openContextualMenuAt:pt];
    }
}

注意看下这段代码 
pt 为映射在webview 上的坐标
得到坐标后，根据contentOffset，获取到点击的坐标上在 web 绝对位置上的坐标点。

- (void)openContextualMenuAt:(CGPoint)pt
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"test1" ofType:@"txt"];
   
    NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [self.mainWebView stringByEvaluatingJavaScriptFromString: jsCode];
   
    NSString *tags = [self.mainWebView stringByEvaluatingJavaScriptFromString:
                      [NSString stringWithFormat:@"MyAppGetHTMLElementsAtPoint(%i,%i);",(NSInteger)pt.x,(NSInteger)pt.y]];
   
    UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"Contextual Menu"
                                                       delegate:self cancelButtonTitle:@"Cancel"
                                         destructiveButtonTitle:nil otherButtonTitles:nil];
   
    if ([tags rangeOfString:@",A,"].location != NSNotFound) {
        [sheet addButtonWithTitle:@"打开链接"];
    }
   
    if ([tags rangeOfString:@",IMG,"].location != NSNotFound) {
        NSString *str = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", pt.x, pt.y];
        NSString *imgStr= [self.mainWebView stringByEvaluatingJavaScriptFromString: str];
        NSLog(@"启动一个request下载图片:%@",imgStr);
        [sheet addButtonWithTitle:@"保存图片"];
    }
   
   
    [sheet addButtonWithTitle:@"在Safari中打开"];
   
    [sheet showInView:self.view];
}

test1.txt 内容如下

function MyAppGetHTMLElementsAtPoint(x,y) {
    var tags = ",";
    var e = document.elementFromPoint(x,y);
    while (e) {
        if (e.tagName) {
            tags += e.tagName + ',';
        }
        e = e.parentNode;
    }
    return tags;
}

这段js 能够返回 web 内容坐标对应 web 节点
然后通过注入方式调用js，并获取到图片地址

NSString *str = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", pt.x, pt.y];
NSString *imgStr= [self.mainWebView stringByEvaluatingJavaScriptFromString: str];

到这里，我们的任务已经完成了大半了。
还需要做的是弹出选择框，用户选择操作，代码实现选择操作。此处省略若干代码和说明。

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
    // 这里实际启动request，下载图片
    // 我看见UC 浏览器断网也是可以下载图片的，我大概知道是通过JS，但具体操作就不知道了，有没有人知道是怎么实现的，分享下
}

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
   
}

这里 webview 一旦加载完成了，通过JS注入，这段js 直接去除了点击和选中效果，否则会出现uiwebview 自带copy 工具，以及选中变灰的效果。

总结：

在webview 加载完成之后，禁用掉webview自带的选择和长按事件。

在外部添加长按事件，并映射成webview中长按事件所处的位置px

在通过调用stringByEvaluatingJavaScriptFromString:@""方法获取到上步中px所处位置的 html 节点

同样通过调用stringByEvaluatingJavaScriptFromString:@""方法得到节点的 src 信息

新开请求去获得图片

我看见UC 浏览器断网也是可以下载图片的，我大概知道是通过JS，但具体操作就不知道了，有没有人知道是怎么实现的，分享下

DEMO下载地址：https://github.com/chexsong/WorkingDemos

车小松（http://blog.csdn.net/mangosnow）

本文遵循“署名-非商业用途-保持一致”创作公用协议