All Products
Search
Document Center

Image

Last Updated: Jun 10, 2022

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