iOS HTML图片本地预览

1.引言

 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理.

  关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容

2.原理

接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击、滑动等,比如点击标签的响应代码如下

var img = document.getElementById(‘test‘); 
img.onclick = function() { 
    do some thing 
} 
  

顺着这个思路往下想,就可以推测出,在iOS中实现点击图片本地预览,也应该是跟javascript交互的,于是问题转换成了javascript与objc的交互. 关于javascript与objc的交互,google下一大堆,看似很复杂,其实非常简单,我这里简单阐述下,大家都知道在iOS中是用UIWebView控件来显示HTML的,那么javascript与objc要实现交互,桥梁必须是UIWebView,通过查看UIWebView提供的相关接口,可以找到如下接口:

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

第一个接口一目了然,即执行javascript,于是就打通了objc到javacript的路,那么javascript到objc呢?答案就是第二个接口,因为当html点击一个新链接就会执行该接口来判定是否要进入新链接,于是只有让javascript去改变href从而来触发第二个接口的调用,就能打通了javascript到objc的路,参数当然存放于request的href中。

  在了解了javascript与objc的交互,还有一个小问题,即何时去执行javascript?查看UIWebView文档,发现可以在如下接口中调用

- (void)webViewDidFinishLoad:(UIWebView *)webView;

3. 实现

在webViewDidFinishLoad执行如下javascript代码,大致功能是遍历html中所有< img>元素,并添加onclick事件,在onclick中修改window.location.href,以触发UIWebView调用webView:shouldStartLoadWithRequest:navigationType接口,参数是image-preview:+< img>标签的src属性

function assignImageClickAction() {
var imgs = document.getElementsByTagName(‘img‘);
var length = imgs.length;
for (var i = 0; i 《(此处是小于号) length; i++) {
    img = imgs[i];
    img.onclick = function() {
        window.location.href = ‘image-preview:‘ + this.src
    }
}
}
assignImageClickAction();

上述javascript可以通过压缩,实际代码如下

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [self.webView stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName(‘img‘);var length=imgs.length;for(var i=0; i 《 (此处是小于号)length;i++){img=imgs[i];img.onclick=function(){window.location.href=‘image-preview:‘+this.src}}}"];
    [self.webView stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];
}

当用户点击会触发如下代码

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //预览图片
    if ([request.URL.scheme isEqualToString:@"image-preview"]) {
        NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        [self.imageView setImageWithURL:[NSURL URLWithString:path] placeholderImage:[UIImage imageNamed:@"default"] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];

        [UIView animateWithDuration:0.2f animations:^{
            self.imageView.alpha = 1.0f;
        }];

        return NO;
    }
    return YES;
}

综述

至此,大家应该明白了iOS APP点击HTML实现本地预览的原理,当然这仅仅只是个开始,你可以修改window.location.href传递的值,从而实现更多功能,比如小图、大图预览等,大家可以到[这里下载源码](访问更详细内容](https://github.com/smallmuou/PPHTMLImagePreviewDemo).

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-07 16:55:46

iOS HTML图片本地预览的相关文章

图片本地预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { width:200px; height:200px; } #preview { border:1px

搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";

网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节. 下面我们就开始使用imgAreaSelect 开始code吧. 第一还是要引用jquery,接着引用下载好的 jquery.imgareaselect.pack.js 文件和 imgareaselect-default.cs

jQuery图片上传前先在本地预览

/**名称:图片上传本地预览插件 v1.1*作者:周祥*时间:2013年11月26日*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;*使用方法: <div><img id="I

web 图片上传实现本地预览

前言: 刚成为码农不久,第一次工作中接触图片上传功能,说到图片上传,大多数程序员可能都是先上传服务器,再获取路径.如果用户多长更改图片,服务器会产生许多垃圾文件.怎样用js实现本地预览.今天特意抽空百度研究了一下. 在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(

jQuery图片上传前先在本地预览(不经过后端处理)

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

js实现图片上传本地预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content

JQuery插件:图片上传本地预览插件,改进案例一则。

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id

js 图片上传本地预览

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;