调用my.chooseImage选择图片_移动开发平台 mPaaS-阿里云帮助中心

my.chooseImage

说明

mPaaS 10.1.32 及以上版本支持该接口。

拍照或从手机相册中选择图片。

说明

图片的路径数组在 IDE 上以 .png 为后缀，在真机预览上以 .image 为后缀，请以真机效果为准。

入参

名称	类型	必填	描述
count	Number	否	最大可选照片数，默认为 1 张
sizeType	StringArray	否	original 原图，compressed 压缩图，默认二者都有
sourceType	StringArray	否	相册选取或者拍照，默认为 [‘camera’,‘album’]
success	Function	否	调用成功的回调函数
fail	Function	否	调用失败的回调函数
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）

success 返回值

名称	类型	描述
apFilePaths	StringArray	图片的路径数组

错误码

error	描述	解决方案
11	用户取消操作	这是用户正常交互流程分支，不需要特殊处理

代码示例

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "图片"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">选择照片</view>
      <view onTap="previewImage">预览照片</view>
      <view onTap="saveImage">保存照片</view>
    </view>
  </view>
</view>

// API-DEMO page/API/image/image.js
Page({
  chooseImage() {
    my.chooseImage({
      sourceType: ['camera','album'],
      count: 2,
      success: (res) => {
        my.alert({
          content: JSON.stringify(res),

        });
      },
      fail:()=>{
        my.showToast({
          content: 'fail', // 文字内容
        });
      }
    })
  },
  previewImage() {
    my.previewImage({
      current: 2,
      urls: [
        'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
      ],
    });
  },
  saveImage() {
    my.saveImage({
      url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
      showActionSheet: true,
      success: () => {
        my.alert({
          title: '保存成功',
        });
      },
    });
  }
});

my.previewImage

说明

mPaaS 10.1.32 及以上版本支持该接口。

此接口用于预览图片。暂不支持浏览本地图片。

基础库版本 1.0.0 在 iOS 上不支持 my.previewImage 和 my.chooseImage 的组合使用。

入参

名称	类型	必填	描述
urls	Array	是	要预览的图片链接列表，支持网络 URL、apfilePath
current	Number	否	当前显示图片索引，默认为 0，即 `urls` 中的第一张图片
success	Function	否	调用成功的回调函数
fail	Function	否	调用失败的回调函数
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）
enablesavephoto	Boolean	否	照片支持长按下载。（基础库 1.13.0 开始支持）
enableShowPhotoDownload	Boolean	否	是否在右下角显示下载入口，需要配合 enablesavephoto 参数使用。（基础库 1.13.0 开始支持）

代码示例

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "图片"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">选择照片</view>
      <view onTap="previewImage">预览照片</view>
      <view onTap="saveImage">保存照片</view>
    </view>
  </view>
</view>

// API-DEMO page/API/image/image.js
Page({
  chooseImage() {
    my.chooseImage({
      sourceType: ['camera','album'],
      count: 2,
      success: (res) => {
        my.alert({
          content: JSON.stringify(res),

        });
      },
      fail:()=>{
        my.showToast({
          content: 'fail', // 文字内容
        });
      }
    })
  },
  previewImage() {
    my.previewImage({
      current: 2,
      urls: [
        'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
      ],
    });
  },
  saveImage() {
    my.saveImage({
      url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
      showActionSheet: true,
      success: () => {
        my.alert({
          title: '保存成功',
        });
      },
    });
  }
});

my.saveImage

说明

mPaaS 10.1.32 及以上版本支持该接口。

此接口用于将在线图片保存至手机相册。

入参

名称	类型	必填	描述
url	String	是	要保存的图片链接
showActionSheet	Boolean	否	是否显示图片操作菜单，默认为 true。（基础库 1.24.0 开始支持）
success	Function	否	调用成功的回调函数
fail	Function	否	调用失败的回调函数
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）

错误码

error	描述	解决方案
2	参数无效，没有传 URL 参数	重新传入正确的 URL 参数。
15	没有开启相册权限（iOS only）	开启相册权限。
16	手机相册存储空间不足（iOS only）	释放手机存储空间。
17	保存图片过程中的其他错误	稍后重试。

常见问题 FAQ

Q：my.saveImage 接口能否保存 Base64 的图片？ A：目前 my.saveImage 暂不支持保存 Base64 的图片。

代码示例

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "图片"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">选择照片</view>
      <view onTap="previewImage">预览照片</view>
      <view onTap="saveImage">保存照片</view>
    </view>
  </view>
</view>

// API-DEMO page/API/image/image.js
Page({
  chooseImage() {
    my.chooseImage({
      sourceType: ['camera','album'],
      count: 2,
      success: (res) => {
        my.alert({
          content: JSON.stringify(res),

        });
      },
      fail:()=>{
        my.showToast({
          content: 'fail', // 文字内容
        });
      }
    })
  },
  previewImage() {
    my.previewImage({
      current: 2,
      urls: [
        'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
        'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
      ],
    });
  },
  saveImage() {
    my.saveImage({
      url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
      showActionSheet: true,
      success: () => {
        my.alert({
          title: '保存成功',
        });
      },
    });
  }
});

my.compressImage

说明

基础库 1.4.0 及以上版本支持该接口，低版本需做兼容处理，操作参见小程序基础库说明，mPaaS 10.1.60 及以上版本支持该接口。

此接口用于压缩图片。

入参

名称	类型	必填	描述
apFilePaths	StringArray	是	要压缩的图片地址数组
compressLevel	Number	否	压缩级别，支持 0 ~ 4 的整数，默认为 4。详见 compressLevel 表。
success	Function	否	调用成功的回调函数
fail	Function	否	调用失败的回调函数
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）

success 返回值

名称	类型	描述
apFilePaths	StringArray	压缩后的路径数组

compressLevel 表

compressLevel	说明
0	低质量
1	中等质量
2	高质量
3	不压缩
4	根据网络适应

代码示例

<!-- API-DEMO page/API/compress-image/compress-image.axml-->
<view class="page">
  <view class="page-description">压缩图片 API</view>
  <view class="page-section">
    <view class="page-section-title">my.compressImage</view>
    <view class="page-section-demo">
      <button type="primary" onTap="selectImage" hover-class="defaultTap">选择图片</button>
      <image
        src="{{compressedSrc}}" 
        mode="{{mode}}" />
    </view>
  </view>
</view>

// API-DEMO page/API/compress-image/compress-image.js
Page({
  data: {
    compressedSrc: '',
    mode: 'aspectFit',
  },
  selectImage() {
    my.chooseImage({
      count: 1,
      success: (res) => {
        my.compressImage({
          apFilePaths: res.apFilePaths,
          compressLevel: 1,
          success: data => {
            console.log(data);
            this.setData({
              compressedSrc: data.apFilePaths[0],
            })
          }
        })
      }
    })
  },
});

my.getImageInfo

说明

基础库 1.4.0 及以上版本支持本接口，低版本需做兼容处理，操作参见小程序基础库说明，mPaaS 10.1.32 及以上版本支持该接口。

此接口用于获取图片信息。

入参

名称	类型	必填	描述
src	String	否	图片路径，目前支持：网络图片路径 apFilePath 路径相对路径
success	Function	否	调用成功的回调函数
fail	Function	否	调用失败的回调函数
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）

success 返回值

名称	类型	描述
width	Number	图片宽度（单位为 px）
height	Number	图片高度（单位为 px）
path	String	图片本地路径
orientation	String	返回图片的方向，有效值见下表
type	String	返回图片的格式

orientation 参数说明

枚举值	说明
up	默认值
down	180 度旋转
left	逆时针旋转 90 度
right	顺时针旋转 90 度
up-mirrored	同 `up`，但水平翻转
down-mirrored	同 `down`，但水平翻转
left-mirrored	同 `left`，但垂直翻转
right-mirrored	同 `right`，但垂直翻转

代码示例

//网络图片路径
my.getImageInfo({
      src:'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
      success:(res)=>{
        console.log(JSON.stringify(res))
      }
    })

//apFilePath
my.chooseImage({
      success: (res) => {
        my.getImageInfo({
          src:res.apFilePaths[0],
          success:(res)=>{
            console.log(JSON.stringify(res))
          }
        })
      },
    })

//相对路径
my.getImageInfo({
      src:'image/api.png',
      success:(res)=>{
        console.log(JSON.stringify(res))
      }
    })