@uni/image

Install

1$ npm install @uni/image --save

or

1$ npm install @uni/apis --save

chooseImage

Selects an image from the local album or takes a photo with the camera.

Supported

Usage

1import { chooseImage } from '@uni/image';
2
3chooseImage({
4  count: 1,
5  sourceType: ['album', 'camera'],
6  success (res) {
7    const tempFilePaths = res.tempFilePaths
8  }
9});
10
11// promise
12chooseImage({
13  count: 1,
14  sourceType: ['album', 'camera']
15}).then(res => {
16  const tempFilePaths = res.tempFilePaths
17});
18

You can also import from the big package：

1import { image } from '@uni/apis';
2
3image.chooseImage({
4  count: 1,
5  sourceType: ['album', 'camera'],
6  success (res) {
7    const tempFilePaths = res.tempFilePaths
8  }
9});
10
11// promise
12image.chooseImage({
13  count: 1,
14  sourceType: ['album', 'camera']
15}).then(res => {
16  const tempFilePaths = res.tempFilePaths
17});

Methods

chooseImage(options)

Arguments

Property	Type	Description	required	Default
options	object		✘	-
options.count	number	The maximum number of images allowed	✘	1
options.sourceType	Array<string>	The source of the image	✘	['album', 'camera']
options.success	Function	The callback function for a successful API call	✘	-
options.fail	Function	The callback function for a failed API call	✘	-
options.complete	Function	The callback function used when the API call completed (always executed whether the call succeeds or fails)	✘	-

Special Arguments

Property	Type	Description	required	Default	Supported
options.sizeType	Array.<string>	The size of the select image	✘	['original', 'compressed']

Return

Property	Type	Description
tempFilePaths	Array<string>	The list of local temporary file paths to images
tempFiles	Array<Object>	The local temporary file list for images

res.tempFiles

Property	Type	Description
path	string	The path to the local temporary file
size	number	The size of a local temporary file, in bytes

compressImage

Compresses images. Multiple types of compression quality are available.

Supported

Usage

1import { compressImage } from '@uni/image';
2
3compressImage({
4  src: 'http://img.icon.com/a.png',
5  quality: 1,
6  success: (res) => {
7    console.log('success', res);
8  },
9  fail: (res) => {
10    console.log('fail', res);
11  },
12  complete: (res) => {
13    console.log('complete', res);
14  }
15});
16
17// promise
18compressImage({
19  src: 'http://img.icon.com/a.png',
20  quality: 1
21}).then(response => {})
22  .catch(error => {})
23  .finally(res => {});
24

You can also import from the big package：

1import { image } from '@uni/apis';
2
3image.compressImage({
4  src: 'http://img.icon.com/a.png',
5  quality: 1,
6  success: (res) => {
7    console.log('success', res);
8  },
9  fail: (res) => {
10    console.log('fail', res);
11  },
12  complete: (res) => {
13    console.log('complete', res);
14  }
15});
16
17// promise
18image.compressImage({
19  src: 'http://img.icon.com/a.png',
20  quality: 1
21}).then(response => {})
22  .catch(error => {})
23  .finally(res => {});
24

Methods

compressImage(options)

Arguments

Property	Type	Description	required	Default
options	object		✔️	-
options.src	string	The path to the image. It can be a relative path, a temporary file path, or a file compress-image path	✔️	-
options.quality	number	Compression quality. The value range is 0-3.	✘	-
options.success	Function	The callback function for a successful API call	✘	-
options.fail	Function	The callback function for a failed API call	✘	-
options.complete	Function	The callback function used when the API call completed (always executed whether the call succeeds or fails)	✘	-

Return

Property	Type	Description
tempFilePath	string	The temporary file path to the compressed image

getImageInfo

Obtains image information. For network images, it only takes effect when the download domain name is configured.

Supported

Usage

1import { getImageInfo } from '@uni/image';
2
3getImageInfo({
4  src: 'http://img.icon.com/a.png',
5  success: (res) => {
6    console.log('success', res);
7  },
8  fail: (res) => {
9    console.log('fail', res);
10  },
11  complete: (res) => {
12    console.log('complete', res);
13  }
14});
15
16// promise
17getImageInfo({
18  src: 'http://img.icon.com/a.png'
19}).then(response => {})
20  .catch(error => {})
21  .finally(res => {});
22

You can also import from the big package：

1import { image } from '@uni/apis';
2
3image.getImageInfo({
4  src: 'http://img.icon.com/a.png',
5  success: (res) => {
6    console.log('success', res);
7  },
8  fail: (res) => {
9    console.log('fail', res);
10  },
11  complete: (res) => {
12    console.log('complete', res);
13  }
14});
15
16// promise
17image.getImageInfo({
18  src: 'http://img.icon.com/a.png'
19}).then(response => {})
20  .catch(error => {})
21  .finally(res => {});
22

Methods

getImageInfo(options)

Arguments

Property	Type	Description	required	Default
options	object		✔️	-
options.src	string	The path to the image. It can be a relative path or a path to a network image.	✔️	-
options.success	Function	The callback function for a successful API call	✘	-
options.fail	Function	The callback function for a failed API call	✘	-
options.complete	Function	The callback function used when the API call completed (always executed whether the call succeeds or fails)	✘	-

Return

Property	Type	Description
width	number	The original width of the image (in px).
height	number	The original height of the image (in px).
path	number	The local path to the image

Special Return

Property	Type	Description	Supported
orientation	string	Device orientation when taking photos
type	string	Image format	no Dingding

orientation

Value	Description
up	Default orientation (landscape)
up-mirrored	Mirrored orientation of up
down	Rotates the device 180 degrees
down-mirrored	Mirrored orientation of down
left-mirrored	Mirrored orientation of left
right	Rotates the device 90 degrees clockwise
right-mirrored	Mirrored orientation of right
left	Rotates the device 90 degrees counterclockwise

previewImage

Previews the image in full screen on a new page. You can save or send it to others while preview.

Supported

Usage

1import { previewImage } from '@uni/image';
2
3previewImage({
4  urls: ['url1', 'url2'],
5  current: 1,
6});
7

You can also import from the big package：

1import { image } from '@uni/apis';
2
3image.previewImage({
4  urls: ['url1', 'url2'],
5  current: 1,
6});
7

Methods

previewImage(options)

Arguments

Property	Type	Description	required	Default
options	object		✘	-
options.urls	Array<string>	The URLs of images to preview	✘
options.current	number	The index of the current image in urls list	✘	0
options.success	Function	The callback function for a successful API call	✘	-
options.fail	Function	The callback function for a failed API call	✘	-
options.complete	Function	The callback function used when the API call completed (always executed whether the call succeeds or fails)	✘	-

Special Arguments

Property	Type	Description	required	Default	Supported
options.showmenu	boolean	show longpress menu	✘	true	2.13.0
options.images	Array<object>	Support the picture link list of the original picture. Note that the order must be consistent with the urls. images: [{url:'Small image address', origin_url:'Original image address'},...]	✘	-

saveImage

Saves images to the system album.

Supported

Usage

1import { saveImage } from '@uni/image';
2
3saveImage({
4  url: 'http://img.icon.com/a.png',
5});
6

You can also import from the big package：

1import { image } from '@uni/apis';
2
3image.saveImage({
4  url: 'http://img.icon.com/a.png',
5});
6

Methods

saveImage(options)

Arguments

Property	Type	Description	required	Default
options	object		✔️	-
options.url	string	The path to the image file. It can be a temporary or permanent file path. The path to a network image is not supported	✔️	-
options.success	Function	The callback function for a successful API call	✘	-
options.fail	Function	The callback function for a failed API call	✘	-
options.complete	Function	The callback function used when the API call completed (always executed whether the call succeeds or fails)	✘	-

Special Arguments

Property	Type	Description	required	Default	Supported
options.showActionSheet	boolean	show operation menus for image	✘	true