uni-app H5调用相机及图库
时间: 2024-10-08 12:06:06 浏览: 49
uni-app插件开发
5星 · 资源好评率100%
UniApp是一个基于Vue.js开发跨平台应用的框架,它允许开发者编写一次代码,然后生成兼容iOS、Android等主流平台的应用。要在UniApp中调用H5页面的相机以及图库功能,可以使用uni-app提供的原生API,通过`uni.chooseImage`和`uni.openCamera`这两个方法来实现。
1. **打开相机**:
使用 `uni.openCamera()` 函数,这会弹出设备的摄像头界面,用户可以选择拍照或录像。示例如下:
```javascript
uni.openCamera({
sourceType: 'camera', // 可选值:camera 或者 photo
toSaveToPhotosAlbum: true, // 是否将拍摄的照片保存到相册,默认true
success (res) {
// 拍照成功后的回调,res.path 获取图片路径
},
fail (err) {
console.log('相机打开失败', err)
}
})
```
2. **选择图片(从图库)**:
`uni.chooseImage` 可以让用户从本地图库中选取照片,返回的结果包含选定的图片列表。示例代码如下:
```javascript
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可选值:['original', 'compressed']
sourceType: ['album', 'camera'], // 可选值:['album', 'camera']
success (res) {
let imgList = res.tempFilePaths; // 返回选中的图片文件路径数组
// 对于每个文件路径做处理...
},
fail (err) {
console.log('图片选择失败', err)
}
})
```
记得在项目中引入相应的权限请求,因为访问用户的设备存储需要特定的权限许可。
阅读全文