Image - Mobile Platform as a Service - Alibaba Cloud Documentation Center

my.chooseImage

This API is supported in mPaaS 10.1.32 and later versions.

This interface is used to take a photo or select a photo from the mobile phone album.

Note

The array of the image path has a suffix of .png on the IDE, and .image on the preview of the real device. Please refer to the effect of the real device.

Input parameter

Name	Type	Required	Description
count	Number	No	Maximum number of photos that can be selected, the default value is 1.
sourceType	String Array	No	Select from album or take a photo, the default value is [‘camera’,’album’].
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

success return value

Name	Type	Description
apFilePaths	String Array	The array of image file path.

Error Code

error	Description	Solution
11	User cancel operation	This is a user’s normal interaction process and does not require special processing.

Code sample

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "Image"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">Select image</view>
      <view onTap="previewImage">Preview image</view>
      <view onTap="saveImage">Save image</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', // Text content
        });
      }
    })
  },
  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: 'Saved',
        });
      },
    });
  }
});

my.previewImage

This API is supported in mPaaS 10.1.32 and later versions.

This interface is used to preview the image. Currently, previewing local image is not supported.

The base library version 1.0.0 does not support the combined use of my.previewImage and my.chooseImage on iOS.

Input parameter

Name	Type	Required	Description
urls	Array	Yes	List of image links to be previewed, URL and apfilePath are supported.
current	Number	No	Currently display image index, the default value is 0, which means the first image in `urls`.
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).
enablesavephoto	Boolean	No	Support press and hold to download photos (Supported since basic the library 1.13.0).
enableShowPhotoDownload	Boolean	No	Whether to display the download entry in the lower right corner, it needs to be used with the enablesavephoto parameter (Supported since the basic library 1.13.0).

Code sample

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "image"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">Select image</view>
      <view onTap="previewImage">Preview image</view>
      <view onTap="saveImage">Save image</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', // Text content
        });
      }
    })
  },
  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: 'Saved',
        });
      },
    });
  }
});

my.saveImage

This API is supported in mPaaS 10.1.32 and later versions.

This interface is used to save Web images to your phone’s photo album.

Input parameter

Name	Type	Required	Description
url	String	Yes	Link of the image to be saved.
showActionSheet	Boolean	No	Whether to display the image operation menu, the default value is true (Supported since basic the library 1.24.0).
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

Error Code

error	Description	Solution
2	Invalid parameter, no url parameter passed	Pass in the correct URL parameter.
15	Permission to access the album is not granted (iOS only)	Grant the permission to access the album.
16	Insufficient storage space for mobile phone album (iOS only)	Clear storage space.
17	Other errors in saving the image	Try again later.

FAQ

Q: Can my.saveImage API save Base64 images?
A: Currently, my.saveImage cannot save Base64 images.

Code sample

// API-DEMO page/API/image/image.json
{
    "defaultTitle": "Image"
}

<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-btns">
      <view onTap="chooseImage">Select image</view>
      <view onTap="previewImage">Preview image</view>
      <view onTap="saveImage">Save image</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', // Text content
        });
      }
    })
  },
  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: 'Saved',
        });
      },
    });
  }
});

my.compressImage

This API is supported in mPaaS 10.1.32 and later versions and from the basic library version 1.4.0. Compatibility process is required for lower basic library versions.

This interface is used to compress the images.

Input parameter

Name	Type	Required	Description
apFilePaths	String Array	Yes	Address array of the image to be compressed.
compressLevel	Number	No	Compression level, support integers from 0 to 4, the default value is 4. For details, see compressLevel table.
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

success return value

Name	Type	Description
apFilePaths	String Array	Compressed path array

compressLevel table

compressLevel	Description
0	Low quality
1	Medium quality
2	High quality
3	Not compressed
4	Adaptive according to network connection

Code sample

<!-- API-DEMO page/API/compress-image/compress-image.axml-->
<view class="page">
  <view class="page-description">Compress image 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">Select image</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

This API is supported in mPaaS 10.1.32 and later versions and from the basic library version 1.4.0. Compatibility process is required for lower basic library versions.

This interface is used to get image information.

Input parameter

Name	Type	Required	Description
src	String	No	Image path, currently support: Online image path apFilePath path Relative path
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

success return value

Name	Type	Description
width	Number	Image width (in px).
height	Number	Image height (in px).
path	String	Local path of image.
orientation	String	Direction of the returned image.
type	String	Format of the returned image.

orientation parameter description

Enumeration value	Description
up	Default value
down	180 degree rotation
left	Rotate 90 degrees counterclockwise
right	Rotate 90 degrees clockwise
up-mirrored	Same as `up`, but flipped horizontally
down-mirrored	Same as `down`, but flipped horizontally
left-mirrored	Same as `left`, but flipped vertically
right-mirrored	Same as `right`, but flipped vertically

Code sample

//Online image path
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))
          }
        })
      },
    })

//Relative path
my.getImageInfo({
      src:'image/api.png',
      success:(res)=>{
        console.log(JSON.stringify(res))
      }
    })