图片

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 用户取消操作 这是用户正常交互流程分支，不需要特殊处理

代码示例

  1. // API-DEMO page/API/image/image.json
  2. {
  3.     "defaultTitle": "图片"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3.   <view class="page-section">
  4.     <view class="page-section-btns">
  5.       <view onTap="chooseImage">选择照片</view>
  6.       <view onTap="previewImage">预览照片</view>
  7.       <view onTap="saveImage">保存照片</view>
  8.     </view>
  9.   </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3.   chooseImage() {
  4.     my.chooseImage({
  5.       sourceType: ['camera','album'],
  6.       count: 2,
  7.       success: (res) => {
  8.         my.alert({
  9.           content: JSON.stringify(res),
  11.         });
  12.       },
  13.       fail:()=>{
  14.         my.showToast({
  15.           content: 'fail', // 文字内容
  16.         });
  17.       }
  18.     })
  19.   },
  20.   previewImage() {
  21.     my.previewImage({
  22.       current: 2,
  23.       urls: [
  24.         'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  25.         'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  26.         'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  27.       ],
  28.     });
  29.   },
  30.   saveImage() {
  31.     my.saveImage({
  32.       url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  33.       showActionSheet: true,
  34.       success: () => {
  35.         my.alert({
  36.           title: '保存成功',
  37.         });
  38.       },
  39.     });
  40.   }
  41. });

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 开始支持）

代码示例

  1. // API-DEMO page/API/image/image.json
  2. {
  3.     "defaultTitle": "图片"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3.   <view class="page-section">
  4.     <view class="page-section-btns">
  5.       <view onTap="chooseImage">选择照片</view>
  6.       <view onTap="previewImage">预览照片</view>
  7.       <view onTap="saveImage">保存照片</view>
  8.     </view>
  9.   </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3.   chooseImage() {
  4.     my.chooseImage({
  5.       sourceType: ['camera','album'],
  6.       count: 2,
  7.       success: (res) => {
  8.         my.alert({
  9.           content: JSON.stringify(res),
  11.         });
  12.       },
  13.       fail:()=>{
  14.         my.showToast({
  15.           content: 'fail', // 文字内容
  16.         });
  17.       }
  18.     })
  19.   },
  20.   previewImage() {
  21.     my.previewImage({
  22.       current: 2,
  23.       urls: [
  24.         'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  25.         'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  26.         'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  27.       ],
  28.     });
  29.   },
  30.   saveImage() {
  31.     my.saveImage({
  32.       url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  33.       showActionSheet: true,
  34.       success: () => {
  35.         my.alert({
  36.           title: '保存成功',
  37.         });
  38.       },
  39.     });
  40.   }
  41. });

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 的图片。

代码示例

  1. // API-DEMO page/API/image/image.json
  2. {
  3.     "defaultTitle": "图片"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3.   <view class="page-section">
  4.     <view class="page-section-btns">
  5.       <view onTap="chooseImage">选择照片</view>
  6.       <view onTap="previewImage">预览照片</view>
  7.       <view onTap="saveImage">保存照片</view>
  8.     </view>
  9.   </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3.   chooseImage() {
  4.     my.chooseImage({
  5.       sourceType: ['camera','album'],
  6.       count: 2,
  7.       success: (res) => {
  8.         my.alert({
  9.           content: JSON.stringify(res),
  11.         });
  12.       },
  13.       fail:()=>{
  14.         my.showToast({
  15.           content: 'fail', // 文字内容
  16.         });
  17.       }
  18.     })
  19.   },
  20.   previewImage() {
  21.     my.previewImage({
  22.       current: 2,
  23.       urls: [
  24.         'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  25.         'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  26.         'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  27.       ],
  28.     });
  29.   },
  30.   saveImage() {
  31.     my.saveImage({
  32.       url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  33.       showActionSheet: true,
  34.       success: () => {
  35.         my.alert({
  36.           title: '保存成功',
  37.         });
  38.       },
  39.     });
  40.   }
  41. });

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 根据网络适应

代码示例

  1. <!-- API-DEMO page/API/compress-image/compress-image.axml-->
  2. <view class="page">
  3.   <view class="page-description">压缩图片 API</view>
  4.   <view class="page-section">
  5.     <view class="page-section-title">my.compressImage</view>
  6.     <view class="page-section-demo">
  7.       <button type="primary" onTap="selectImage" hover-class="defaultTap">选择图片</button>
  8.       <image
  9.         src="{{compressedSrc}}" 
  10.         mode="{{mode}}" />
  11.     </view>
  12.   </view>
  13. </view>
  1. // API-DEMO page/API/compress-image/compress-image.js
  2. Page({
  3.   data: {
  4.     compressedSrc: '',
  5.     mode: 'aspectFit',
  6.   },
  7.   selectImage() {
  8.     my.chooseImage({
  9.       count: 1,
  10.       success: (res) => {
  11.         my.compressImage({
  12.           apFilePaths: res.apFilePaths,
  13.           level: 1,
  14.           success: data => {
  15.             console.log(data);
  16.             this.setData({
  17.               compressedSrc: data.apFilePaths[0],
  18.             })
  19.           }
  20.         })
  21.       }
  22.     })
  23.   },
  24. });

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，但垂直翻转

代码示例

  1. //网络图片路径
  2. my.getImageInfo({
  3.       src:'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  4.       success:(res)=>{
  5.         console.log(JSON.stringify(res))
  6.       }
  7.     })
  9. //apFilePath
  10. my.chooseImage({
  11.       success: (res) => {
  12.         my.getImageInfo({
  13.           src:res.apFilePaths[0],
  14.           success:(res)=>{
  15.             console.log(JSON.stringify(res))
  16.           }
  17.         })
  18.       },
  19.     })
  21. //相对路径
  22. my.getImageInfo({
  23.       src:'image/api.png',
  24.       success:(res)=>{
  25.         console.log(JSON.stringify(res))
  26.       }
  27.     })