image.md 11.9 KB
Newer Older
M
mehaotian 已提交
1
### uni.chooseImage(OBJECT)
W
wanganxp 已提交
2 3 4
从本地相册选择图片或使用相机拍照。

App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考[plus.camera](https://www.html5plus.org/doc/zh_cn/camera.html)
M
mehaotian 已提交
5 6 7 8 9 10

**OBJECT 参数说明**

|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|count|Number|否|最多可以选择的图片张数,默认9|见下方说明|
雪洛's avatar
雪洛 已提交
11
|sizeType|Array<String>|否|original 原图,compressed 压缩图,默认二者都有|App、微信小程序、支付宝小程序、百度小程序|
Q
qiang 已提交
12
|extension|Array<String>|否|根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。|H5(HBuilder X2.9.9+)|
M
mehaotian 已提交
13
|sourceType|Array<String>|否|album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项||
Q
qiang 已提交
14
|crop|Object|否|图像裁剪参数,设置后 sizeType 失效|App 3.1.19+|
M
mehaotian 已提交
15
|success|Function|是|成功则返回图片的本地文件路径列表 tempFilePaths||
雪洛's avatar
雪洛 已提交
16
|fail|Function|否|接口调用失败的回调函数|小程序、App|
M
mehaotian 已提交
17 18
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

Q
qiang 已提交
19 20 21 22 23 24 25 26 27
**crop 参数说明**

|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|quality|Number|否|取值范围为1-100,数值越小,质量越低(仅对jpg格式有效)。默认值为80。|
|width|Number|是|裁剪的宽度,单位为px,用于计算裁剪宽高比。|
|height|Number|是|裁剪的高度,单位为px,用于计算裁剪宽高比。|
|resize|Boolean|否|是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注:设置为false时在裁剪编辑界面显示图片的像素值,设置为true时不显示|

M
mehaotian 已提交
28 29
**Tips**

雪洛's avatar
雪洛 已提交
30
- count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
雪洛's avatar
雪洛 已提交
31
- sourceType 在H5端对应`input``capture`属性,设置为`['album']`无效,依然可以使用相机。
W
wanganxp 已提交
32
- 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
W
wanganxp 已提交
33
- App端如需选择非媒体文件,可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择),其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
W
wanganxp 已提交
34
- 选择照片大多为了上传,uni ui封装了更完善的[uni-file-picker组件](https://ext.dcloud.net.cn/plugin?id=4079),文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。
W
wanganxp 已提交
35

M
mehaotian 已提交
36 37 38 39 40 41 42 43

**注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 [uni.saveFile](api/file/file?id=savefile),在应用下次启动时才能访问得到。**

**success 返回参数说明**

|参数|类型|说明|
|:-|:-|:-|
|tempFilePaths|Array<String>|图片的本地文件路径列表|
Q
qiang 已提交
44
|tempFiles|Array<Object>、Array<File>|图片的本地文件列表,每一项是一个 File 对象|
M
mehaotian 已提交
45 46 47 48 49 50 51

**File 对象结构如下**

|参数|类型|说明|
|:-|:-|:-|
|path|String|本地文件路径|
|size|Number|本地文件大小,单位:B|
52
|name|String|包含扩展名的文件名称,仅H5支持|
Q
qiang 已提交
53
|type|String|文件类型,仅H5支持|
M
mehaotian 已提交
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

**示例**

```javascript
uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});
```

### uni.previewImage(OBJECT) @unipreviewimageobject
预览图片。

**OBJECT 参数说明**

|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|current|String/Number|详见下方说明|详见下方说明||
|urls|Array<String>|是|需要预览的图片链接列表||
雪洛's avatar
雪洛 已提交
77 78 79
|indicator|String|否|图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。|App|
|loop|Boolean|否|是否可循环预览,默认值为 false|App|
|longPressActions|Object|否|长按图片显示操作菜单,如不填默认为**保存相册**|App 1.9.5+|
M
mehaotian 已提交
80 81 82 83 84 85 86 87 88 89 90 91 92
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

**current 参数说明**

> 1.9.5+ 支持传图片在 urls 中的索引值

current 为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。**App平台在 1.9.5至1.9.8之间,current为必填。不填会报错**

注意,当 urls 中有重复的图片链接时:

- 传链接,预览结果始终显示该链接在 urls 中第一次出现的位置。
93
- 传索引值,在微信/百度/字节跳动小程序平台,会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。
M
mehaotian 已提交
94 95 96 97 98 99

举例说明:

一组图片 `[A, B1, C, B2, D]`,其中 B1 与 B2 的图片链接是一样的。

- 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
100
- 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/字节跳动小程序平台,最终传入的 urls 是 `[A, C, B2, D]`,过滤掉了与 B2 重复的 B1。
W
wanganxp 已提交
101 102 103 104 105 106 107 108 109 110 111

**longPressActions 参数说明**

|参数|类型|必填|说明|
|:-|:-|:-|:-|
|itemList|Array<String>|是|按钮的文字数组|
|itemColor|String|否|按钮的文字颜色,字符串格式,默认为"#000000"|
|success|Function|否|接口调用成功的回调函数,详见返回参数说明|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

M
mehaotian 已提交
112 113 114
**success 返回参数说明**

|参数|类型|说明|
W
wanganxp 已提交
115
|:-|:-|:-|
M
mehaotian 已提交
116
|index|Number|用户长按图片的索引值|
W
wanganxp 已提交
117 118
|tapIndex|Number|用户点击按钮列表的索引值|

M
mehaotian 已提交
119 120 121 122
**示例**

```javascript
// 从相册选择6张图
W
wanganxp 已提交
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
uni.chooseImage({
	count: 6,
	sizeType: ['original', 'compressed'],
	sourceType: ['album'],
	success: function(res) {
		// 预览图片
		uni.previewImage({
			urls: res.tempFilePaths,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
M
mehaotian 已提交
142 143 144
	});
```

W
wanganxp 已提交
145 146 147 148 149
**TIPS**
- 在非H5端,previewImage是原生实现的,界面自定义灵活度较低。
- 插件市场有前端实现的previewImage,性能低于原生实现,但界面可随意定义;插件市场也有适于App端的previewImage原生插件,提供了更多功能。


M
mehaotian 已提交
150 151 152 153
### uni.getImageInfo(OBJECT)

获取图片信息。

W
wanganxp 已提交
154 155
小程序下获取网络图片信息需先配置download域名白名单才能生效。

M
mehaotian 已提交
156 157
**平台差异说明**

DCloud_JSON's avatar
DCloud_JSON 已提交
158 159 160
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|
M
mehaotian 已提交
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177

**OBJECT 参数说明**

|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|src|String|是|图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**success 返回参数说明**

|参数名|类型|说明|平台差异说明|
|:-|:-|:-|:-|
|width|Number|图片宽度,单位px||
|height|Number|图片高度,单位px||
|path|String|返回图片的本地路径||
C
CheJJ 已提交
178 179
|orientation|String|返回图片的方向,有效值见下表|App、小程序|
|type|String|返回图片的格式|App、小程序|
M
mehaotian 已提交
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216

**orientation 参数说明**

|枚举值|说明|
|:-|:-|
|up|默认|
|down|180度旋转|
|left|逆时针旋转90度|
|right|顺时针旋转90度|
|up-mirrored|同up,但水平翻转|
|down-mirrored|同down,但水平翻转|
|left-mirrored|同left,但垂直翻转|
|right-mirrored|同right,但垂直翻转|

**示例**

```javascript
uni.chooseImage({
	count: 1,
	sourceType: ['album'],
	success: function (res) {
		uni.getImageInfo({
			src: res.tempFilePaths[0],
			success: function (image) {
				console.log(image.width);
				console.log(image.height);
			}
		});
	}
});
```

### uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。

**平台差异说明**

DCloud_JSON's avatar
DCloud_JSON 已提交
217 218 219
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|√|√|√|
M
mehaotian 已提交
220 221 222 223 224 225 226 227 228 229 230 231 232 233

**OBJECT 参数说明**

|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|filePath|String|是|图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**success 返回参数说明**

|参数名|类型|说明|
|:-|:-|:-|
234
|path|String|保存到相册的图片路径,仅 App 3.0.5+ 支持|
M
mehaotian 已提交
235 236
|errMsg|String|调用结果|

W
wanganxp 已提交
237 238 239
**注意**

- 可以通过用户授权API来判断用户是否给应用授予相册的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize)
W
wanganxp 已提交
240
- H5没有API可触发保存到相册行为,下载图片时浏览器会询问图片存放地址。
W
wanganxp 已提交
241

M
mehaotian 已提交
242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
**示例代码:**

```javascript
uni.chooseImage({
	count: 1,
	sourceType: ['camera'],
	success: function (res) {
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePaths[0],
			success: function () {
				console.log('save success');
			}
		});
	}
});
W
wanganxp 已提交
257 258 259 260 261 262
```

# uni.compressImage(OBJECT)

压缩图片接口,可选压缩质量

M
mehaotian 已提交
263 264
**平台差异说明**

DCloud_JSON's avatar
DCloud_JSON 已提交
265 266 267
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√(基础库版本>=3.110.3)|√|√|√|
W
wanganxp 已提交
268 269 270

**OBJECT 参数说明**

Q
qiang 已提交
271 272 273 274
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |
| :- | :- | :- | :- | :- | :- |
| src | String |  | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 ||
| quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) ||
Q
qiang 已提交
275 276
| width | String | auto | 否 | 缩放图片的宽度,支持像素值(如"100px")、百分比(如"50%")、自动计算(如"auto",即根据height与源图高的缩放比例计算,若未设置height则使用源图高度)|App 3.0.0+|
| height | String | auto | 否 | 缩放图片的高度,支持像素值(如"100px")、百分比(如"50%")、自动计算(如"auto",即根据height与源图高的缩放比例计算,若未设置height则使用源图高度)|App 3.0.0+|
Q
qiang 已提交
277 278 279
| success | Function |  | 否 | 接口调用成功的回调函数 ||
| fail | Function |  | 否 | 接口调用失败的回调函数 ||
| complete | Function |  | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) ||
W
wanganxp 已提交
280 281 282 283 284 285 286 287 288 289

**success 返回参数说明**

| 属性 | 类型 | 说明 |
| :- | :- | :- |
| tempFilePath | String | 压缩后图片的临时文件路径 |

**示例代码:**

```js
M
mehaotian 已提交
290 291 292 293 294 295
uni.compressImage({
  src: '/static/logo.jpg',
  quality: 80,
  success: res => {
    console.log(res.tempFilePath)
  }
W
wanganxp 已提交
296
})
W
wanganxp 已提交
297
```