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

my.chooseImage

Note

This Application Programming Interface (API) is supported in mPaaS 10.1.32 and later.

You can take a photo or select an image from the phone's album.

Note

The image path array has a .png suffix in the Integrated Development Environment (IDE) and a .image suffix in the real device preview. The result on the real device is considered the standard behavior.

Input parameters

Name	Type	Required	Description
count	Number	No	The maximum number of photos that can be selected. The default value is 1.
sizeType	StringArray	No	original for the original image, and compressed for the compressed image. The default includes both.
sourceType	StringArray	No	The image source. Can be 'album' or 'camera'. The default is ['camera', 'album'].
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed at the end of the call, regardless of whether the call succeeds or fails.

Success return value

Name	Type	Description
apFilePaths	StringArray	An array of image paths.

Error codes

error	Description	Solution
11	The user canceled the operation.	This is a normal user interaction flow and no special handling is required.

Code examples

// 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">Choose 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 successfully',
        });
      },
    });
  }
});

my.previewImage

Note

This API is supported in mPaaS 10.1.32 and later.

This API is used to preview images. Viewing local images is not currently supported.

On iOS, base libraries 1.0.0 do not support using my.previewImage and my.chooseImage together.

Input parameters

Name	Type	Required	Description
urls	Array	Yes	A list of image links to preview. Supports web URLs and apFilePaths.
current	Number	No	The index of the currently displayed image. The default value is 0, which is the first image in `urls`.
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed at the end of the call, regardless of whether the call succeeds or fails.
enablesavephoto	Boolean	No	Allows downloading the photo with a long press. (Supported in base libraries 1.13.0 and later.)
enableShowPhotoDownload	Boolean	No	Specifies whether to display a download entry in the lower-right corner. This parameter must be used with the enablesavephoto parameter. (Supported in base libraries 1.13.0 and later.)

Code examples

// 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">Choose 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 successfully',
        });
      },
    });
  }
});

my.saveImage

Note

This API is supported in mPaaS 10.1.32 and later.

This API saves an online image to the phone's album.

Input parameters

Name	Type	Required	Description
url	String	Yes	The link of the image to save.
showActionSheet	Boolean	No	Specifies whether to display the image operation menu. The default value is true. (Supported in base libraries 1.24.0 and later.)
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed at the end of the call, regardless of whether the call succeeds or fails.

Error codes

error	Description	Solution
2	Invalid parameter. The URL parameter was not provided.	Provide the correct URL parameter.
15	Album permission not granted (iOS only).	Grant album permission.
16	Insufficient storage space in the phone album (iOS only).	Free up phone storage space.
17	Other errors occurred during the image saving process.	Try again later.

FAQ

Q: Can the my.saveImage API save Base64 images? A: No. This API does not currently support saving Base64 images.

Code examples

// 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">Choose 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 successfully',
        });
      },
    });
  }
});

my.compressImage

Note

This API is supported in mPaaS 10.1.60 and later, and in base libraries 1.4.0 and later. For earlier versions of base libraries, you must ensure compatibility. For more information, see Mini Program base libraries.

This API compresses images.

Input parameters

Name	Type	Required	Description
apFilePaths	StringArray	Yes	An array of image addresses to compress.
compressLevel	Number	No	The compression level. It supports integers from 0 to 4. The default value is 4. For more information, see the compressLevel table.
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed at the end of the call, regardless of whether the call succeeds or fails.

Success return value

Name	Type	Description
apFilePaths	StringArray	Compressed array of paths

compressLevel table

compressLevel	Description
0	Low quality
1	Medium quality
2	High quality
3	No compression
4	Adapts to network conditions

Code examples

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

Note

This API is supported in mPaaS 10.1.32 and later, and in base libraries 1.4.0 and later. For earlier versions of base libraries, you must ensure compatibility. For more information, see Mini Program base libraries.

This API retrieves image information.

Input parameters

Name	Type	Required	Description
src	String	No	The image path. The following paths are currently supported: Web image path apFilePath path Relative path
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed at the end of the call, regardless of whether the call succeeds or fails.

Success return value

Name	Type	Description
width	Number	Image width in px.
height	Number	Image height in px.
path	String	Local path of the image.
orientation	String	The orientation of the image. For valid values, see the table below.
type	String	The format of the image.

orientation parameter description

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

Code examples

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