小程式圖片相關API使用說明-移動開發平台 mPaaS-阿里雲

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))
      }
    })