APICloud(三):预览图片

上一篇说的选择图片,且显示图片的img标签的父级A标签每个都添加了onclick事件previewThePic,该事件用来预览图片。且所有的A标签都添加在picList的div中。(PS:先说好层级关系,代码中获取img的src就不会晕了)

对于图片预览,ac官方提供了两个模块:imageBrowser和photoBrowser

imageBrowser:可预览,顶部有导航条(可返回、可保存到本地),唯一的缺点:不能删除图片且自定义的地方比较少

photoBrowser:可预览,顶部没有有导航条,双击可放大,不能返回,不能保存图片,需要根据事件自定义图片

权衡了两个模块的功能,最后选择的photoBrowser。

imageBrowser的使用也在这里粘一下,大家可以直接复制先看看效果。当然也可以直接参考官网的例子

/**
 *该方法用来预览图片-使用imageBrowser,可预览,顶部有导航条(可返回、可保存到本地),唯一的缺点:不能删除图片
 * @param obj:A标签,主要用来获取当前A标签的下标用来当先显示点击的图片
 *  **/
function previewThePicByimageBrowser(obj){
	//1、获取图片数组
	var picArray = new Array();
	$("#picList").children().each(function(i){		
		picArray[i]=this.children[0].src;		
	});
	//alert(picArray);
	
	//2、获取当前图片的index
	var index = $(obj).index();
	//alert("当前图片的下标:"+index);
	
	//3、引入模块,进行预览
	var imageBrowser = api.require('imageBrowser');
	imageBrowser.openImages({
	    imageUrls:picArray,//图片的URL组成的数组
	    showList:false,//是否以九宫格方式显示图片,默认值:true(效果:点击某个图片后,先以九宫形式显示所有图片,然后单击哪张显示哪张)
	    activeIndex:index,//当不用九宫格方式显示时,当前要显示的图片在集合中的索引
	    tapClose:false//当showList为false时,本参数有效。若本参数为true,则不显示顶部导航条,且单击图片时退出本模块。若本参数为false,则显示顶部导航条,且单击图片隐藏/显示顶部导航条   
	});
}

因为最后选择的 photoBrowser,所以添加了删除图片和将图片保存到手机的功能。

/**
 *该方法用来预览图片-使用photoBrowser,可预览,顶部没有有导航条,双击可放大,不能返回,不能保存图片,需要根据事件自定义图片
 * (网上搜的导航栏的解决办法:自己open个frame贴上去就行了;模块开了个fream,然后我在开个fream透明的写在他上面么?
回调里调用 openFrame,效果在Frame上写)
 * @param obj:A标签,主要用来获取当前A标签的下标用来当先显示点击的图片
 *  **/
function previewThePic(obj){
	//previewThePicByimageBrowser(obj);
	//1、获取图片数组
	var picArray = new Array();
	$("#picList").children().each(function(i){		
		picArray[i]=this.children[0].src;		
	});
	//alert(picArray);
	var imgCount = picArray.length;//获取图片总张数
	//alert(picArray);
	
	//2、获取当前图片的index
	var index = $(obj).index();
	//alert("使用photoBrowser进行图片预览");
	//3、引入模块,进行预览
	var photoBrowser = api.require('photoBrowser');
	photoBrowser.open({
	    images: picArray,//图片的URL组成的数组
	    activeIndex:index,//当前要显示的图片在图片路径数组中的索引
	    //placeholderImg: 'widget://launch/wmltapp.png',//当加载网络图片时显示的占位图路径,要求本地图片路径(widget://、fs://)
	    bgColor: '#000',//背景色
	    zoomEnabled:true//是否打开缩放手势识别功能(随手势放大缩小图片)
	}, function(ret, err) {
	    if (ret) {
	    	var eveType = ret.eventType;
	    	var imgIndex = ret.index;//当前图片的下标
	    	photoBrowser.clearCache();//清除缓存
	    	switch(eveType){
	    		case "show":break;//打开浏览器并显示,以后做导航用(openFrame)
	    		case "change":{//切换图片的时候,不处理
	    			/*
	    			photoBrowser.getImage({
					    index: imgIndex
					}, function(ret33, err33) {
						alert(ret33.path);
					});
					*/
	    			break;
	    		}
	    		case "click":{//单击图片浏览器,用来关闭图片浏览器
	    			photoBrowser.close();
	    			break;
	    		}
	    		case "longPress":{//长按,弹出框,让选择是保存还是删除
    				api.actionSheet({
					    cancelTitle: '取消',
					    destructiveTitle: '删除',//红色警示按钮标题,一般用于做一些删除之类操作
					    buttons: ['保存到手机']
					}, function(ret2, err2) {	  
					    //ret.buttonIndex:1、删除 2、保存到手机 3、取消
					    switch(ret2.buttonIndex){
					    	case 1:{//删除
					    		//先删除在预览图片集合中的图片
					    		photoBrowser.deleteImage({
					    			index:imgIndex
                                });
                                imgCount = imgCount-1;
                                
                                //2、删除页面中对应的a标签
                                //alert($("#picList>a:eq("+imgIndex+")").length);
                                $("#picList>a:eq("+imgIndex+")").remove();
                                    
                                //3、判断当前图片集合中是否还有可以预览的图片,若是没有,关闭当前图片浏览器
                                if(imgCount<=0){//说明删完了
                                	validateBtn();//修改保存按钮的状态
                                	photoBrowser.close();                                	
                                } 
					    		break;
					    	}
					    	case 2:{//保存到手机
					    		//先获取图片路径:
					    		photoBrowser.getImage({
								    index: ret.index
								}, function(ret3, err3) {
								    if (ret3) {
								        //alert("图片路径:"+ret3.path);
								        //然后通过路径保存到手机
										api.saveMediaToAlbum({
			                                path: ret3.path
		                                },function(ret4,err){
		                                	if (ret4 && ret4.status) {
										        //alert('保存成功');
										        //最后弹出保存成功与否
										        api.toast({
			                                        msg:'保存成功',
												    duration: 2000,//默认为2000,即2s
												    location: 'middle'//可选值:top、middle、bottom,默认为bottom		
		                                        });
										    } else {
										        alert('保存失败');
										    }
		                                });
								    } else {
								        alert("获取图片路径失败");
								    }
								});								
					    		
					    		break;
					    	}
					    }					    
					});	
	    			break;
	    		}
	    	}
	    } else {
	        alert(JSON.stringify(err));
	    }
	});
}

图片预览还是很简单的,只要页面上都使用这种结构,哪里都能调用啦!

最后,祝好运!

猜你喜欢

转载自1017401036.iteye.com/blog/2370675