codecamp

支付宝小程序API 图片

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.previewImage 和 my.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 的图片。

支付宝小程序API 字体
支付宝小程序API 视频播放
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序介绍

支付宝小程序 开放能力

支付宝小程序开发文档

支付宝小程序 开发入门

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 UI

支付宝小程序 云与开放能力

支付宝小程序 行业

支付宝小程序 服务端快速示例

支付宝小程序 框架

支付宝小程序框架 小程序全局配置

支付宝小程序 小程序页面

支付宝小程序框架 AXML

支付宝小程序框架 SJS语法

支付宝小程序框架 事件系统

支付宝小程序框架 自定义组件

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 视图容器

支付宝小程序组件 基础内容

支付宝小程序 表单组件

支付宝小程序组件 导航

支付宝小程序组件 媒体

支付宝小程序 画布

支付宝小程序 地图

支付宝小程序 开放组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序扩展组件 布局导航

支付宝小程序浮层组件 操作浮层

支付宝小程序扩展组件 结果类

支付宝小程序扩展组件 提示引导

支付宝小程序扩展组件 表单类

支付宝小程序组件 手势类

支付宝小程序手势组件 其他

支付宝小程序 营销组件

支付宝小程序 API

支付宝小程序API 界面

支付宝小程序 多媒体

支付宝小程序API 设备

支付宝小程序 开发工具

支付宝小程序 界面

支付宝小程序 小程序调试

支付宝小程序 功能面板

支付宝小程序 实验室

支付宝小程序 IDE扩展

支付宝小程序 多端发布

支付宝小程序 插件

支付宝小程序 插件类型

支付宝小程序 插件获取与使用

支付宝小程序 插件开发与发布

支付宝小程序 插件相关API

支付宝小程序 云服务

支付宝小程序 Serverless

支付宝小程序 快速开始

支付宝小程序Serverless 云调用指南

营销能力API

会员能力API

支付能力 API

安全能力 API

资金能力 API

支付宝小程序Serverless 通用接口API

支付宝小程序Serverless 阿里云能力API

支付宝小程序 小程序云应用

支付宝小程序 扩展能力

支付宝小程序扩展能力 开发框架

支付宝小程序扩展能力 工具类库

支付宝小程序 常见问题

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }