uexImage查看3.0文档

图片插件

1.1、说明

封装了图片的相关功能:您可以使用该插件进行选择.导出、裁剪、浏览、存入系统相册等一系列针对图片的操作.

本文的目的是为了开发能够更好更快地将API集成到自己的项目中，在使用前最好先使用好我们提供的demo并对照文档运行看看效果。
这里可以【参考教程】下载AppCan IDE为开发者工具开发，然后集成到自己的项目上。
备注：iOS应用需要配置隐私权限才能正常调用，参考【1.5、接口有效性】。

1.2、UI展示

1.3、开源源码

点击至插件详情页(插件测试用例与插件包已经提供)

1.4、平台版本支持

本插件的所有API默认支持Android4.0+和iOS7.0+操作系统.
有特殊版本要求的API会在文档中额外说明.

1.5、接口有效性

本插件所有API默认在插件版本4.0.0+可用.
在后续版本中新添加的接口会在文档中额外说明. iOS隐私权限配置说明。

2、 API预览

2.1、 方法
openPicker //打开照片选择器

uexImage.openPicker(param,callback);

说明

  • 打开一个可以选择本地相册图片的选择器,导出所选图片,并返回图片路径
  • 默认导出图片的格式为jpg

参数

参数名称 参数类型 是否必选 说明
param String 否 picker参数设置
callback Function 否 picker被关闭的回调函数 
var param = {
  min:,
  max:,
  quality:,
  usePng:,
  detailedInfo,
  style：1
}

各字段含义如下:

参数名称 参数类型 是否必选 说明 默认值
min Number 否 最小选择数量 ,传0表示无限制 1
max Number 否 最大选择数量 ,传0表示无限制 0
quality Number 否 JPG压缩质量 取值范围 0-1 越大表示质量越好 0.5
usePng Boolean 否 用png格式导出图片 ,此参数为true时,quality参数无效 false
detailedInfo Boolean 否 此参数为true时,回调中会包含图片的额外信息 false
style Number 否 如果不传或者传0 为默认样式，传1为新样式(仿微信) 0
  • png 无损且支持透明色,但文件体积比jpg大.
  • 用户应按需求自行选择图片文件格式

回调参数

var callback = function(error,info){
}
参数名称 类型 说明
info Object 返回的数据信息,形式见下:
error Number 0为成功,-1为点击取消而关闭,其他为失败 
var info = {
  detailedImageInfo:,
  data:
}

各字段含义如下:

参数名称 参数类型 是否必选 说明
detailedImageInfo Array 否 ,仅openPicker有设置detailedInfo为true时才有此参数 导出的图片的信息uexImageInfo结构构成的数组
data Array 否 导出的图片地址构成的数组
  • 即使只选择一张图片 detailedImageInfo和imageInfo也是数组
  • uexImageInfo结构如下定义
var uexImageInfo={
    localPath:,//String,必选,图片地址
    timestamp:,//Number,可选,图片创建时间的10位时间戳 (此参数读取自图片的EXIF数据,如无法获取或不存在,则无此参数)
    longitude:,//Number,可选,图片拍摄地点的经度 (此参数读取自图片的EXIF数据,如无法获取或不存在,则无此参数)
    latitude:,//Number,可选,图片拍摄地点的纬度 (此参数读取自图片的EXIF数据,如无法获取或不存在,则无此参数)
    altitude:,//Number,可选,图片拍摄地点的海拔 (此参数读取自图片的EXIF数据,如无法获取或不存在,则无此参数)
}

示例

var data = {
    min:2,
    max:3,
    quality:0.8,
    detailedInfo:true,
    style：1
}
uexImage.openPicker(data,function(error,info){
    if(error==-1){
        alert("cancelled!");
    }else if(error==0){
        alert(info.data);
        if(info.detailedImageInfo){
            alert(JSON.stringify(info.detailedImageInfo));
        }
    }else{
        alert("error");
    }
});
openBrowser //打开图片浏览器

uexImage.openBrowser(param,callback);

说明

  • 打开一个可以浏览图片的浏览器
  • 图片路径支持 wgt:// wgts:// res:// file:// http:// https://

参数

参数名称 参数类型 是否必选 说明
param String 是 browser参数设置
callback Function 否 browser被关闭的回调函数 
var param = {
    displayActionButton:,
    displayNavArrows:,
    enableGrid:,
    startOnGrid:,
    startIndex:,
    data:[],
    style,
    gridBackgroundColor,  // style为1时生效
    gridBrowserTitle,
    viewFramePicPreview:{   //位置、大小
      x:,
      y:,
      w:,
      h:,
    },
    viewFramePicGrid:{   //位置、大小
      x:,
      y:,
      w:,
      h:,
    }
}

各字段含义如下:

参数名称 参数类型 是否必选 说明 默认值
displayActionButton Boolean 否 显示分享按钮 false
displayNavArrows Boolean 否 显示切换箭头(仅iOS支持此参数) false
enableGrid Boolean 否 允许九宫格视图 true
startOnGrid Boolean 否 以九宫格视图起始 false
startIndex Number 否 非负整数 起始图片位置 0
data Array 是 图片资源构成的数组 无
style Number 否 UI样式，0：插件旧风格UI；1：仿照微信优化后的UI。 0
gridBackgroundColor String 否 九宫格背景颜色，style为1时支持 黑色
gridTitle String 否 九宫格预览图片的标题，style为1时支持 图片浏览
viewFramePicPreview Object 否 单张图片视图的位置大小信息，形如"viewFramePicPreview":{ x:0, y:0,w:1080, h:1767}，style为1时才有效 全屏
viewFramePicGrid Object 否 九宫格视图的位置大小信息，形如："viewFramePicGrid":{ x:0, y:0,w:1080, h:1767}，style为1时才有效 全屏
  • 即使只浏览一张图片 data也必须是数组
  • data内的元素可以是 字符串 或者是 Json对象 格式
    • 传字符串时,此字符串应为图片资源路径
    • 传Json对象时, 结构如下
{
    src:,//(String,必选)图片资源路径,支持 wgt:// wgts:// res:// file:// http:// https:// 
    thumb:,//(String,可选)图片缩略图路径
    desc:,//(String,可选) 为图片添加一段文字描述
    showBigPic:,//(Boolean 可选) 是否显示大图，默认不显示false，参数值为false、true
}

回调参数 ​
回调函数callback没有参数

示例

var data ={
    displayActionButton:true,
    displayNavArrows:true,
    enableGrid:true,
    //startOnGrid:true,
    startIndex:2,
    data:["res://photo1.jpg",
        {
        src:"res://photo2.jpg",
        thumb:"res://photo2t.jpg",
        showBigPic: true
        },
        {
        src:"res://photo3.jpg",
        thumb:"res://photo3t.jpg",
        desc:"22222222222222"
        },
        {
        src:"http://it-eproducts.com/images/3-1347760443.jpg",
        thumb:"res://photo4t.jpg",
        desc:"22222222222222"
        }],
        style:1,
        gridBackgroundColor:"#4A88C1",  // style为1时生效
        gridBrowserTitle:"图片浏览",
        viewFramePicPreview:{   //位置、大小
            x:0,
            y:0,
            w:1080,
            h:1767,
        },
        viewFramePicGrid:{   //位置、大小
            x:0,
            y:0,
            w:200,
            h:1767,
        }
}
uexImage.openBrowser(data,function(){
    alert("browser closed!");
});
openCropper //打开图片裁剪器

uexImage.openCropper(param,callback);

说明

  • 打开一个图片裁剪器,导出裁剪后的图片,并返回图片路径
  • 本API只有裁剪功能,裁剪后的图片大小即为所裁剪部分在原图中的大小

参数

参数名称 参数类型 是否必选 说明
param String 否 cropper参数设置
cb Function 否 cropper被关闭的回调函数 
var param = {
      src:,
      quality:,
      usePng:,
    mode:1
}

各字段含义如下:

参数名称 参数类型 是否必选 说明 默认值
src String 否 图片路径 支持wgt:// wgts:// file:// res://,不传此参数时,会先打开系统相册让用户选择一张图片 无
quality Number 否 JPG压缩质量 取值范围 0-1 越大表示质量越好 0.5
usePng Boolean 否 用png格式导出图片 ,此参数为true时,quality参数无效 false
mode Number 否 1- 正方型裁剪；
2- 圆形裁剪(仅iOS支持圆形裁剪)；
4-矩形裁剪，宽高比(4:3)；
5-矩形裁剪，宽高比(16:9)；
6-矩形裁剪，宽高自由缩放(mode为6仅支持安卓)		 1

回调参数

var callback = function(error,info){}
参数名称 类型 说明
info Object 返回图片相关信息,形式见下:
error Number 0表示成功,-1表示取消,其他表示失败 
var info = {
  isCancelled:,
  data:
}

各字段含义如下:

参数名称 参数类型 是否必选 说明
isCancelled Boolean 是 选择器是否是由于点击取消而关闭
data String 否 裁剪后的图片地址

示例

var data={
    src:"res://photo5.jpg",
    mode:2
}
uexImage.openCropper(data,function(error,info){
    if(error==-1){
        alert("cancelled!");
    }else if(error==0) {
        alert(info.data);

    }
});
saveToPhotoAlbum //储存到相册

uexImage.saveToPhotoAlbum(param,callback);

说明

  • 将本地图片储存到系统相册

参数

参数名称 参数类型 是否必选 说明
param String 是 储存参数设置
callback Function 否 储存的回调函数

param为json字符串,包含的参数如下

参数名称 参数类型 是否必选 说明
localPath String 是 图片路径 支持res:// wgt:// wgts:// file://

回调参数

var callback = function(error,errorInfo){
}
参数名称 参数类型 是否必选 说明
error Number 是 为0表示储存成功,非0表示储存失败
errorInfo String 否 储存失败的错误信息.储存成功时,errorInfo为null

示例

var data={
    localPath:"res://photo4.jpg",
}
uexImage.saveToPhotoAlbum(data,function(err,errStr){
    if(!err){
        alert("储存成功!");
    }else{
        alert("储存失败:" + errStr);
    }
});
clearOutputImages //清除由本插件导出的所有图片文件

uexImage.clearOutputImages();

说明

  • 清除由本插件的openPicker、openCropper接口所生成的图片文件
  • 若您的APP有多个widget,则只会清除由当前widget所生成的图片文件

参数

无

返回值

本方法有一个Boolean类型的返回值,代表清除操作是否成功

示例

var ret = uexImage.clearOutputImages();
alert(ret);
setIpadPopEnable //设置iPad是否启用pop窗口

uexImage.setIpadPopEnable(flag);

说明

  • 插件在iPad上默认用pop窗口展示插件页面,
  • 通过调用此接口,可以选择是否禁用pop窗口,改用全屏展示插件页面.

参数

参数名称 参数类型 是否必选 说明
flag Number 是 为0时表示禁用pop窗口,非0时表示启用pop窗口

平台支持

仅 iOS 7.0+

示例

uexImage.setIpadPopEnable(0);
compressImage //压缩图片文件接口

uexImage.compressImage(param,callback);

说明

  • 压缩图片文件至指定大小

参数

参数名称 参数类型 是否必选 说明
param String 是 压缩图片的配置参数
callback Function 否 压缩完成的回调函数 
var params = {
    "srcPath": ,
    "desLength": 
}

各字段含义如下:

参数名称 参数类型 是否必选 说明
srcPath String 是 图片路径 支持res:// wgt:// wgts:// file://
desLength Number 是 压缩图片的指定大小，单位为B

回调参数

var callback = function(error,info){
}
参数名称 类型 说明
error Number 1为成功,0为压缩图片失败
info String 返回的数据信息,形式见下: 
var params = {
    "status": ,
    "filePath": 
}

各字段含义如下:

参数名称 参数类型 是否必选 说明
status String 是 是否压缩成功 ok/fail
filePath String 否 压缩后的图片路径，仅在图片压缩成功时才会有此参数

示例


var params = {
    srcPath : "/storage/emulated/0/DCIM/Camera/IMG_20161010_093830.jpg",
     desLength : 30*1024
};
uexImage.compressImage(data, function(err,errStr){
    if(1 == err) //成功
    {
        alert(errStr);
    } else if (0 == err) //失败
    {
        alert("error");
    }
});

3、更新历史

iOS

API版本: uexImage-4.0.8

最近更新时间:2017-05-27

历史发布版本 更新内容
4.0.8 移除新样式支持
4.0.5 openBrower style为1新样式 openPicker Style为1新样式
4.0.4 图片压缩接口回调参数定义
4.0.3 添加图片压缩接口compressImage。
4.0.2 优化加载网络图片的进度条; 回调修正,和文档保持一致
4.0.1 支持4x3裁剪和16x9裁剪
Android

API版本: uexImage-4.0.8

最近更新时间:2017-5-27

历史发布版本 更新内容
4.0.8 移除新样式支持
4.0.7 (依赖引擎4.0.1)修复样式错乱的问题
4.0.6 (依赖引擎4.0.1)openCropper支持不传src,网络图片显示进度1.根据微信样式，优化插件UI；2.支持国际化；3.添加图片压缩接口compressImage。
4.0.5 (依赖引擎4.0.1)图片自动滚动到最新
4.0.4 mode参数支持矩形任意区域裁剪和显示大图，引入ACEImageLoader解决ImageLoader未配置导致的crash问题, 依赖4.0.1版本引擎
4.0.3 修复usePng 为true时 不能保存图片的bug
4.0.2 支持矩形任意区域裁剪和显示大图
还需要帮助吗? 联系我们
最新更新 8th Jul 2021