MImagePicker

图片选取器：包含拍照，录制视频，相册选图，图片和视频处理、获取图片和视频信息、图片涂鸦、文本、剪裁，水印相机等功能。

注意事项

• UI效果图
• 图片、视频处理前后数据对比图
• 由于拍照、视频处理属于耗时操作，因此最好加上loading提升用户体验
• 以下接口的error回调中，errCode通用释义

iOS 注意事项

1. iOS端仅支持iOS10.0(含)以上的系统。
2. 接口示例代码中cordova.file.externalDataDirectory路径仅适用于Android，更多关于Android与iOS本地存储目录请参考这里

Android 注意事项

1. 图片处理和视频处理中saveToAlbum如果为true，那么图片和视频path必须填写非应用路径，如填写cordova.file.externalRootDirectory + '目录\文件名'，才能将资源更新到相册。
2. 使用过程中，若修改系统UI参数，如系统按键或屏幕默认分辨率，会导致当前页面的自定义UI失效，需要再次打开水印相机才能恢复正常
3. 水印中文字的字号随水印尺寸变化，若文字较小或模糊，可通过放大水印尺寸优化；水印尺寸size设置越大，字体呈现效果越好

目录

1. 打开相机拍照或者拍摄视频
2. 从相册选择图片
3. 从相册选择视频和图片
4. 图片处理
5. 视频处理
6. 图片编辑
7. 获取图片信息
8. 获取视频信息
9. 将图片、视频存入系统相册或指定相册
10. 打开水印相机
11. 关闭水印相机
12. 更新水印相机同步状态

API

打开相机拍照或者拍摄视频

1. 自定义相机效果
2. 图片编辑效果图
3. 自定义相机不带系统调校（如广角、光学防抖、微距等），无法设置参数，对成像要求较高的建议使用系统相机

MImagePicker.openCamera(path, success, error, options);

options结构说明

photoConfig结构说明

editConfig 结构说明

• limit参数 1.3.4版本开始生效

videoConfig结构说明

调用示例

// 拍照

MImagePicker.openCamera(
  // cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
  cordova.file.externalDataDirectory + 'test.jpg', 
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    sourceType: 'photo',
    photoConfig: {
      edit: true,
      customCamera: true,
      editConfig:
      {
        limits: ['shape', 'doodle','text','crop','mosaic'],
        cropAspectRatio: "1:1"
      }
    }
  }
);

// 录制视频
MImagePicker.openCamera(
  // cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
  cordova.file.externalDataDirectory + 'test.mp4',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    sourceType: 'video',
    videoConfig: {
      recordDuration: 10,
      videoQuality:1
    }
  }
);

从相册选择图片

MImagePicker.openAlbum(paths, success, error, options);

options结构说明

调用示例

// cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
MImagePicker.openAlbum(
  [
    cordova.file.externalDataDirectory + 'test1.jpg',
    cordova.file.externalDataDirectory + 'test2.jpg',
    cordova.file.externalDataDirectory + 'test3.jpg',
    cordova.file.externalDataDirectory + 'test4.jpg',
  ],
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    customMode: true,
    edit: true,
    editConfig:
    {
      limits: ['shape', 'doodle','text','crop','mosaic'],
      cropAspectRatio: "4:3"
    }
  }
);

从相册选择视频和图片

MImagePicker.openAlubmForVideosAndImages(paths, success, error, options);

options结构说明

paths规则说明

• 路径名必须包含文件拓展名
• 插件会通过传入的路径拓展名来判断是否能选择图片、视频还是图片和视频都能选
• 选图片文件拓展名传jpg，选视频文件拓展名传mp4。传递非jpg，mp4的文件拓展名(包含没有拓展名)，将会直接进入错误回调
• 自定义相册中非jpg、mp4的文件选择是会提示不支持的文件类型
• 视频、图片文件超过数量时会提示：最多选择X张/个图片/视频。X为路径中传递的图片/视频数量

调用示例

// cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
MImagePicker.openAlubmForVideosAndImages(
  [
    cordova.file.externalDataDirectory + 'test1.mp4',
    cordova.file.externalDataDirectory + 'test2.mp4',
    cordova.file.externalDataDirectory + 'test3.jpg',
    cordova.file.externalDataDirectory + 'test4.jpg',
    cordova.file.externalDataDirectory + 'test5.jpg',
  ],
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    maxVPSize: 3,
    edit: true,
    editConfig:{
       limits: ['shape', 'doodle','text','crop','mosaic'],
       cropAspectRatio: "4:3"
    }
  }
);

图片处理

MImagePicker.imageProcess(path, success, error, options);

options结构说明

注意：width和height如果小于待压缩图片尺寸，那么图片宽高不做处理

watermarkConfig参数字段说明

调用示例

MImagePicker.imageProcess(
  // cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
  cordova.file.externalDataDirectory + 'test.jpg',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    saveToAlbum: true,
    ratio: 0.8,
    width: 1080,
    height: 1920,
    keepOrigin: false,
    watermarkConfig: {
      textBackground: '#40000000',
      textAlignment: 'left',
      boardPosition: 'bottom',
      textColumns: [
        {
          iconPath: cordova.file.externalDataDirectory + 'icon1.jpg',
          text: '第 ' + 1 + ' 行水印',
          textColor: '#FFFFFF'
        },
        {
          iconPath: cordova.file.externalDataDirectory + 'icon2.jpg',
          text: '第 ' + 2 + ' 行水印',
          textColor: '#FFFFFF'
        },
      ]
    }
  }
);

视频处理

MImagePicker.videoProcess(path, success, error, options);

在Android中，该接口仅支持5.0+系统

options结构说明

调用示例

MImagePicker.videoProcess(
  // cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
  cordova.file.externalDataDirectory + 'test.mp4',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    saveToAlbum: true,
    ratio: 0.8,
  }
);

图片编辑

MImagePicker.editImage(pathGroups, success, error, options);

pathGroups结构说明

[
  {
    "srcPath": "src_image_01.png",// 待编辑图片路径
    "destPath": "dest_image_02.png"// 编辑后的图片存放路径
  },
  {
    "srcPath": "src_image_01.png",
    "destPath": "dest_image_02.png"
  }
]

result结构说明

[
  {
    "code": -1,// 非0时操作失败
    "errMsg": "图片不存在",// 操作失败具体原因
    "srcPath": "src_image_01.png",// 待编辑图片路径
  },
  {
    "code": 0,// 为0时操作成功
    "srcPath": "src_image_01.png",// 待编辑图片路径
    "destPath": "dest_image_02.png"// 编辑后的图片存放路径(仅当图片编辑成功后该值才有内容返回)
  }
]

调用示例

// cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
MImagePicker.editImage(
  [
    {
      srcPath: cordova.file.externalDataDirectory + 'test1.jpg',
      destPath: cordova.file.externalDataDirectory + 'edit_test1.jpg'
    },
    {
      srcPath: cordova.file.externalDataDirectory + 'test2.jpg',
      destPath: cordova.file.externalDataDirectory + 'edit_test2.jpg'
    }
  ],
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    limits: ['shape', 'doodle','text','crop','mosaic'],
    cropAspectRatio: "4:3"
  }
)

获取图片信息

MImagePicker.getImageInfo(path, success, error);

result说明

{
  "width": 1080,// 照片宽度
  "height": 1920,// 照片高度
  "size": 1024,// 照片占用内存大小，单位：Byte
  "dateTime": "2019:03:07 18:05:20",// 照片拍摄时间，格式:"yyyy:mm:dd HH:mm:ss"
}

调用示例

MImagePicker.getImageInfo(
  cordova.file.externalDataDirectory + 'test.jpg',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  }
);

获取视频信息

MImagePicker.getVideoInfo(path, success, error, options);

options结构说明

result说明

{
  "width": 1080,// 帧宽度
  "height": 1920,// 帧高度
  "size": 1024,// 视频占用内存大小，单位：Byte
  "dateTime": "2019:03:07 18:05:20",// 照片拍摄时间，格式:"yyyy:mm:dd HH:mm:ss"
  "rotate": 90,// 视频旋转角度
  "duration": 10, // 视频时长，单位：毫秒
  "firstFramePath": "xxxx", // 视频首帧存放路径，绝对路径
}

调用示例

  // cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明


MImagePicker.getVideoInfo(
  cordova.file.externalDataDirectory + 'test.mp4',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  {
    firstFramePath: cordova.file.externalDataDirectory + 'video_frame.jpg',
  }
);

将图片、视频存入系统相册或指定相册

MImagePicker.saveToAlbum(path, success, error, group);

调用示例

// cordova.file.externalDataDirectory仅适用于Android，iOS本地路径参数请查阅本文档注意事项部分说明
MImagePicker.saveToAlbum(
  cordova.file.externalDataDirectory + 'test.mp4',
  function (result) {
    console.log('success', result)
  },
  function (error) {
    console.log('error:', error)
  },
  "AppCloud"
);

打开水印相机

MImagePicker.openWatermarkCamera(cameraParams, callback);

cameraParams结构说明

watermarkConfig结构说明

callback结构说明

调用示例

// 注意：`iOS端`水印相机功能，支持的最低系统版本为`iOS10.0`

MImagePicker.openWatermarkCamera(
  {
    "ratio": 1.7777777,
    "thumbnail": "",
    "storeDirectory": cordova.file.externalDataDirectory + "watermark",
    "syncButtonIconPath": cordova.file.externalDataDirectory + "sync_button_icon.png",
    "watermarkConfig": {
      "size": 0.75,
      "opacity": 0.5,
      "title": "水印测试项目",// 该title的value值无长度限制，长度超过水印范围会以省略号结尾
      "items": [
        [
          {
            "title": "编号",// 该title的value值限制长度小于等于4 超出会出现省略号 下同
            "content": "123-456-789"
          },
          {
            "title": "计数",
            "content": "8"
          }
        ],
        [
          {
            "title": "施工区域",
            "content": "广东省深圳市南山区高新南一道2号"
          },
          {
            "title": "施工内容",
            "content": "外墙清洗"
          },
          {
            "title": "责任人",
            "content": "张三"
          }
        ]
      ]
    }
  }, 
  {
    onSuccess: function () {
      console.log('onSuccess');
    },
    onThumbnailClick: function () {
      console.log('onThumbnailClick');
    },
    onWatermarkSettingClick: function () {
      console.log('onWatermarkSettingClick');
    },
    onSyncClick: function () {
      console.log('onSyncClick');
    },
    onSyncFailClick: function () {
      console.log('onSyncFailClick');
    },
    onTakePicture: function (path) {
      console.log('onTakePicture', path);
    },
    onError: function (error) {
      console.log('onError', error);
    },
    onClose: function () {
      console.log('close') ;
    }
  }
);

关闭水印相机

MImagePicker.closeWatermarkCamera(）;

更新水印相机同步状态

MImagePicker.updateWatermarkCameraSyncState(options);

options结构说明

调用示例

MImagePicker.updateWatermarkCameraSyncState(
  {
    // 若2个字段都传空值，底部提示条会被隐藏
    syncButtonIconPath: cordova.file.externalDataDirectory + "sync_button_icon.png",
    syncStateText: "正在同步中...",
    syncFailText: "同步失败>>"
  }
);

更新水印相机配置

MImagePicker.updateWatermarkCameraConfig(config);

调用示例

MImagePicker.updateWatermarkCameraConfig({
  "size": 0.8,
  "opacity": 0.8,
  "title": "水印测试项目（更新）",// 该title的value值无长度限制，长度超过水印范围会以省略号结尾
  "items": [
    [{
        "title": "编号（更新）","编号",// 该title的value值限制长度小于等于4 超出会出现省略号 下同
        "content": "123-456-789（更新）"
      },
      {
        "title": "计数（更新）",
        "content": "8（更新）"
      }
    ],
    [{
        "title": "施工区域（更新）",
        "content": "广东省深圳市南山区高新南一道2号（更新）"
      },
      {
        "title": "施工内容（更新）",
        "content": "外墙清洗（更新）"
      },
      {
        "title": "责任人（更新）",
        "content": "张三（更新）"
      }
    ]
  ]
});

UI效果图

图片水印UI

自定义相机效果

1. 拍照页面

2. 预览页面

iOS自定义相册UI

Android自定义相册UI

图片、视频处理前后数据对比图

图片编辑效果图

1. 添加图形界面

图形编辑说明:

1. 点击图形可以进入编辑模式
2. 选中模式下，按住线框滑动可以移动图形
3. 选中模式下，按住图形上的点滑动可以修改图形大小

2. 涂鸦

3. 添加文字

4. 图片裁剪

图片裁剪说明:

1. 点击底部裁剪按钮进入裁剪模式
2. 通过双指触摸进行图片缩放
3. 单指移动图片调整裁剪区域

5. 马赛克