apicloud 预览图片_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));

}

});

}

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

最后，祝好运！