支付寶小程序API 圖片

my.chooseImage

簡介

my.chooseImage 是拍照或從本地相冊中選擇圖片的 API。

使用限制

• 圖片的路徑數(shù)組在 IDE 上以 .png 為后綴，在真機預(yù)覽上以 .image 為后綴。請以真機效果為準。
• 出于數(shù)據(jù)安全考慮，IoT 小程序禁止調(diào)用攝像頭；請勿在 IoT 小程序上調(diào)用此 API，否則會造成小程序異常。

掃碼體驗

效果示例

示例代碼

// 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">預(yù)覽照片</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', // 文字內(nèi)容
        });
      }
    })
  },
  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: '保存成功',
        });
      },
    });
  }
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
count	Number	否	最大可選照片數(shù)，默認為 1 張。
sizeType	StringArray	否	圖片類型。original 原圖compressed 壓縮圖默認二者都有。
sourceType	String Array	否	相冊選取或者拍照，默認 ['camera','album']。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

success 回調(diào)函數(shù)

錯誤碼

my.compressImage

簡介

my.compressImage 是壓縮圖片的 API。

使用限制

基礎(chǔ)庫 1.4.0 或更高版本；支付寶客戶端 10.1.8 或更高版本 ，若版本較低，建議采取 兼容處理。

掃碼體驗

效果示例

示例代碼

<!-- 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],
            })
          }
        })
      }
    })
  },
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
apFilePaths	String Array	是	要壓縮的圖片地址數(shù)組。
compressLevel	Number	否	壓縮級別，支持 0 ~ 4 的整數(shù)，默認為 4。詳見下文 compressLevel 表說明。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

success 回調(diào)函數(shù)

compressLevel 表

my.getImageInfo

簡介

my.getImageInfo 是獲取圖片信息的 API。

使用限制

基礎(chǔ)庫 1.4.0 或更高版本；支付寶客戶端 10.1.8 或更高版本，若版本較低，建議采取 兼容處理。

掃碼體驗

效果示例

示例代碼

<!-- 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


//網(wǎng)絡(luò)圖片路徑
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))
      }
    })

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
src	String	否	圖片路徑，目前支持：網(wǎng)絡(luò)圖片路徑、apFilePath 路徑、相對路徑。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

success 回調(diào)函數(shù)

orientation 參數(shù)說明

my.previewImage

簡介

my.previewImage 是預(yù)覽圖片的 API。

使用限制

• 不支持本地圖片路徑。
• 基礎(chǔ)庫 版本 1.0.0 在 iOS 上不支持 my.previewImage 和 my.chooseImage 的組合使用。

掃碼體驗

效果示例

示例代碼

// 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">預(yù)覽照片</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', // 文字內(nèi)容
        });
      }
    })
  },
  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: '保存成功',
        });
      },
    });
  }
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
urls	Array	是	要預(yù)覽的圖片 HTTP 鏈接列表。支持網(wǎng)絡(luò) url，apfilePath。
current	Number	否	當前顯示圖片索引，默認值為 0，即 urls 中的第一張圖片。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。
enablesavephoto	Boolean	否	照片支持長按下載?；A(chǔ)庫 1.13.0 版本開始支持。
enableShowPhotoDownload	Boolean	否	是否在右下角顯示下載入口。基礎(chǔ)庫 1.13.0 版本開始支持。

my.saveImage

簡介

my.saveImage 是將在線圖片保存至本地相冊的 API。

掃碼體驗

效果示例

示例代碼

// 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">預(yù)覽照片</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', // 文字內(nèi)容
        });
      }
    })
  },
  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: '保存成功',
        });
      },
    });
  }
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	要保存的圖片鏈接。
showActionSheet	Boolean	否	是否顯示圖片操作菜單，默認為 true。基礎(chǔ)庫 1.24.0 版本開始支持。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

錯誤碼

常見問題 FAQ

Q：my.saveImage 接口不能保存 Base64 的圖片嗎？

A：目前 my.saveImage 暫不支持保存 Base64 的圖片。