iOS HTML图片本地预览
- 引言
相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理.
关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容
- 原理
接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击、滑动等,比如点击<img>标签的响应代码如下
var img = document.getElementById('test');
img.onclick = function() {
do some thing
}
- (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;
- 实现
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();"];
}
当用户点击<img>会触发如下代码
- (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传递的值,从而实现更多功能,比如小图、大图预览等,大家可以到这里下载源码.
iOS HTML图片本地预览的更多相关文章
- 图片本地预览 flash html5
dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...
- jquery 图片本地预览
uploadPreview.js /* *名称:图片上传本地预览插件 v1.1 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *参数说明: I ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- jQuery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
随机推荐
- css 如何隐藏滚动条
原理: 把滚动条设为完全透明: /* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;} /* 滚动槽 */::-webkit-scrollbar-track ...
- 云计算---openstack实例共享80、443端口
前言 因为openstack使用的是apache,所以不能共享80端口,但创建的许多云主机,虽然可以通过rinetd进行跳转,但有时需要直接访问80端口,所以这里我们选择包含了nginx的openre ...
- Xshell提示缺失mfc110.dll
xshell 应用程序无法正常启动0xc000007b 下载 DirectX修复工具_3.3 Xshell 缺少 mfc110.dll https://www.microsoft.co ...
- JAVA NIO之文件通道
1.简介 通道是 Java NIO 的核心内容之一,在使用上,通道需和缓存类(ByteBuffer)配合完成读写等操作.与传统的流式 IO 中数据单向流动不同,通道中的数据可以双向流动.通道既可以读, ...
- 【Flask】 使用Flask-Moment进行日期时间的管理
Flask-Moment Flask-Moment又是一个flask的扩展模块,用来处理时间日期等信息.用这个模块主要是考虑到两点,第一是为了让不同时区的用户看到的都是各自时区的实际时间,而不是服务器 ...
- 【Python】 sys和os模块
sys sys模块能使程序访问于python解释器联系紧密的变量和函数 ● sys中的一些函数和变量 argv 命令行参数构成的列表 path 查找所有可用模块所在的目录名的列表 platform 查 ...
- 国内可用的Internet时间同步服务器地址(NTP时间服务器)
不知道什么鬼我这系统自带的Internet时间同步服务器地址居然不可用,终端ping系统自带服务器两个居然都不通???难道时间服务器也和谐么? 好在阿里云提供了7个NTP时间服务器也就是Interne ...
- kvm之六:配置kvm虚拟机通过VNC访问
1.网络安装的snale2没有添加VNC访问方式,配置如下 [root@kvm ~ ::]#virsh edit snale2 插入如下配置: <graphics type=' autoport ...
- Vue 知识复习(上)
Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...
- Spring-MongoDB 关键类的源码分析
本文分析的是 spring-data-mongodb-1.9.2.RELEASE.jar 和 mongodb-driver-core-3.2.2.jar. 一.UML Class Diagram 核心 ...