支付宝小程序API 图片

2020-09-16 15:49 更新

my.chooseImage

简介

my.chooseImage 是拍照或从本地相册中选择图片的 API。

使用限制

  • 图片的路径数组在 IDE 上以 .png 为后缀,在真机预览上以 .image 为后缀。请以真机效果为准。
  • 出于数据安全考虑,IoT 小程序禁止调用摄像头;请勿在 IoT 小程序上调用此 API,否则会造成小程序异常。

扫码体验

my.jpeg

效果示例

my.chooseimage.gif

示例代码

// 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: '保存成功',
        });
      },
    });
  }
});

入参

Object 类型,属性如下:

属性 类型 必填 描述
count Number 最大可选照片数,默认为 1 张。
sizeType StringArray 图片类型。original 原图compressed 压缩图默认二者都有。
sourceType String Array 相册选取或者拍照,默认 ['camera','album']。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

success 回调函数
属性 类型 描述
apFilePaths String Array 图片的路径数组。

错误码

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

my.compressImage

简介

my.compressImage 是压缩图片的 API。

使用限制

基础库 1.4.0 或更高版本;支付宝客户端 10.1.8 或更高版本 ,若版本较低,建议采取 兼容处理

扫码体验

image

效果示例

my.compressimage.png

示例代码

<!-- 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,
          level: 1,
          success: data => {
            console.log(data);
            this.setData({
              compressedSrc: data.apFilePaths[0],
            })
          }
        })
      }
    })
  },
});

入参

Object 类型,属性如下:

属性 类型 必填 描述
apFilePaths String Array 要压缩的图片地址数组。
compressLevel Number 压缩级别,支持 0 ~ 4 的整数,默认为 4。详见下文 compressLevel 表说明。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

success 回调函数
属性 类型 描述
apFilePaths String Array 压缩后的路径数组。

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

my.getImageInfo

简介

my.getImageInfo 是获取图片信息的 API。

使用限制

基础库 1.4.0 或更高版本;支付宝客户端 10.1.8 或更高版本,若版本较低,建议采取 兼容处理

扫码体验

getimageinfo.jpeg

效果示例

getimageinfo.gif

示例代码

<!-- API-DEMO page/API/get-image-info/get-image-info.axml-->
<view class="page">
  <view class="page-description">获取图片信息 API</view>
  <view class="page-section">
    <view class="page-section-title">my.getImageInfo</view>
    <view class="page-section-demo">
      <image src="{{src}}" onError="imageError" onLoad="imageLoad" />
      <button type="primary" onTap="getImageInfo">获取图片信息</button>
    </view>
  </view>
</view>
// .js


//网络图片路径
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))
      }
    })

入参

Object 类型,属性如下:

属性 类型 必填 描述
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.previewImage

简介

my.previewImage 是预览图片的 API。

使用限制

  • 不支持本地图片路径。
  • 基础库 版本 1.0.0 在 iOS 上不支持 my.previewImagemy.chooseImage 的组合使用。

扫码体验

my.jpeg

效果示例

my.previewimage.gif

示例代码

// 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: '保存成功',
        });
      },
    });
  }
});

入参

Object 类型,属性如下:

属性 类型 必填 描述
urls Array 要预览的图片 HTTP 链接列表。支持网络 url,apfilePath。
current Number 当前显示图片索引,默认值为 0,即 urls 中的第一张图片。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。
enablesavephoto Boolean 照片支持长按下载。基础库 1.13.0 版本开始支持。
enableShowPhotoDownload Boolean 是否在右下角显示下载入口。基础库 1.13.0 版本开始支持。

my.saveImage

简介

my.saveImage 是将在线图片保存至本地相册的 API。

扫码体验

my.jpeg

效果示例

my.saveimage.png

示例代码

// 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: '保存成功',
        });
      },
    });
  }
});

入参

Object 类型,属性如下:

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

错误码

错误码 描述 解决方案
2 参数无效,没有传 URL 参数。 重新传入正确的 URL 参数。
15 没有开启相册权限(仅在 iOS 上可用)。 开启相册权限。
16 手机相册存储空间不足 (仅在 iOS 上可用)。 释放手机存储空间。
17 保存图片过程中的其他错误。 稍后重试。

常见问题 FAQ

Q:my.saveImage 接口不能保存 Base64 的图片吗?

A:目前 my.saveImage 暂不支持保存 Base64 的图片。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号