AI 助理
备案控制台
文档
输入文档关键字查找
首页 移动开发平台 mPaaS 小程序 小程序开发 小程序 API 多媒体 图片

图片

更新时间：
产品详情
相关技术圈
我的收藏

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))
      }
    })
上一篇：多媒体下一篇：视频
文档推荐