文档

图片

更新时间:

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.previewImagemy.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

  • Qmy.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))
      }
    })
  • 本页导读 (0)
文档反馈