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.
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 |
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:
|
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 |
down-mirrored | Same as |
left-mirrored | Same as |
right-mirrored | Same as |
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))
}
})