All Products
Search
Document Center

Image

Last Updated: Feb 05, 2021

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

  1. // API-DEMO page/API/image/image.json
  2. {
  3. "defaultTitle": "Image"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-btns">
  5. <view onTap="chooseImage">Select image</view>
  6. <view onTap="previewImage">Preview image</view>
  7. <view onTap="saveImage">Save image</view>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3. chooseImage() {
  4. my.chooseImage({
  5. sourceType: ['camera','album'],
  6. count: 2,
  7. success: (res) => {
  8. my.alert({
  9. content: JSON.stringify(res),
  10. });
  11. },
  12. fail:()=>{
  13. my.showToast({
  14. content: 'fail', // Text content
  15. });
  16. }
  17. })
  18. },
  19. previewImage() {
  20. my.previewImage({
  21. current: 2,
  22. urls: [
  23. 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  24. 'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  25. 'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  26. ],
  27. });
  28. },
  29. saveImage() {
  30. my.saveImage({
  31. url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  32. showActionSheet: true,
  33. success: () => {
  34. my.alert({
  35. title: 'Saved',
  36. });
  37. },
  38. });
  39. }
  40. });

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

  1. // API-DEMO page/API/image/image.json
  2. {
  3. "defaultTitle": "image"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-btns">
  5. <view onTap="chooseImage">Select image</view>
  6. <view onTap="previewImage">Preview image</view>
  7. <view onTap="saveImage">Save image</view>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3. chooseImage() {
  4. my.chooseImage({
  5. sourceType: ['camera','album'],
  6. count: 2,
  7. success: (res) => {
  8. my.alert({
  9. content: JSON.stringify(res),
  10. });
  11. },
  12. fail:()=>{
  13. my.showToast({
  14. content: 'fail', // Text content
  15. });
  16. }
  17. })
  18. },
  19. previewImage() {
  20. my.previewImage({
  21. current: 2,
  22. urls: [
  23. 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  24. 'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  25. 'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  26. ],
  27. });
  28. },
  29. saveImage() {
  30. my.saveImage({
  31. url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  32. showActionSheet: true,
  33. success: () => {
  34. my.alert({
  35. title: 'Saved',
  36. });
  37. },
  38. });
  39. }
  40. });

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

  1. // API-DEMO page/API/image/image.json
  2. {
  3. "defaultTitle": "Image"
  4. }
  1. <!-- API-DEMO page/API/image/image.axml -->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-btns">
  5. <view onTap="chooseImage">Select image</view>
  6. <view onTap="previewImage">Preview image</view>
  7. <view onTap="saveImage">Save image</view>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/image/image.js
  2. Page({
  3. chooseImage() {
  4. my.chooseImage({
  5. sourceType: ['camera','album'],
  6. count: 2,
  7. success: (res) => {
  8. my.alert({
  9. content: JSON.stringify(res),
  10. });
  11. },
  12. fail:()=>{
  13. my.showToast({
  14. content: 'fail', // Text content
  15. });
  16. }
  17. })
  18. },
  19. previewImage() {
  20. my.previewImage({
  21. current: 2,
  22. urls: [
  23. 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  24. 'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  25. 'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  26. ],
  27. });
  28. },
  29. saveImage() {
  30. my.saveImage({
  31. url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  32. showActionSheet: true,
  33. success: () => {
  34. my.alert({
  35. title: 'Saved',
  36. });
  37. },
  38. });
  39. }
  40. });

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

  1. <!-- API-DEMO page/API/compress-image/compress-image.axml-->
  2. <view class="page">
  3. <view class="page-description">Compress image API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.compressImage</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="selectImage" hover-class="defaultTap">Select image</button>
  8. <image
  9. src="{{compressedSrc}}"
  10. mode="{{mode}}" />
  11. </view>
  12. </view>
  13. </view>
  1. // API-DEMO page/API/compress-image/compress-image.js
  2. Page({
  3. data: {
  4. compressedSrc: '',
  5. mode: 'aspectFit',
  6. },
  7. selectImage() {
  8. my.chooseImage({
  9. count: 1,
  10. success: (res) => {
  11. my.compressImage({
  12. apFilePaths: res.apFilePaths,
  13. level: 1,
  14. success: data => {
  15. console.log(data);
  16. this.setData({
  17. compressedSrc: data.apFilePaths[0],
  18. })
  19. }
  20. })
  21. }
  22. })
  23. },
  24. });

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

  1. //Online image path
  2. my.getImageInfo({
  3. src:'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  4. success:(res)=>{
  5. console.log(JSON.stringify(res))
  6. }
  7. })
  8. //apFilePath
  9. my.chooseImage({
  10. success: (res) => {
  11. my.getImageInfo({
  12. src:res.apFilePaths[0],
  13. success:(res)=>{
  14. console.log(JSON.stringify(res))
  15. }
  16. })
  17. },
  18. })
  19. //Relative path
  20. my.getImageInfo({
  21. src:'image/api.png',
  22. success:(res)=>{
  23. console.log(JSON.stringify(res))
  24. }
  25. })