uniapp h5+ 拍照、录音功能实现
uniapp 功能实现
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- uniapp h5+ 拍照、录音功能实现
- 前言
- 一、拍照
- 1.调取摄像头拍摄照片
- 2.管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能
- GalleryOptions
- 二、压缩图片
- 1.uniapp 压缩图片
- 2.h5+压缩图片
- 三、录音
- 1.uniapp 录音
- 总结
前言
记录一些uniapp的功能实现
uniapp 扫码、拍照_mtl1994的博客- 扫码
[HTML5+ API Reference](https://www.html5plus.org/doc/h5p.html)
提示:以下是本篇文章正文内容,下面案例可供参考
一、拍照
1.调取摄像头拍摄照片
代码如下:示例
// 获取摄像头管理对象 getCamera 参数 index 指定要获取摄像头的索引值,1表示主摄像头,2表示辅摄像头。如果没有设置则使用系统默认主摄像头。
// 安卓不能默认打开前置摄像头 ios可以
const cmr = plus.camera.getCamera()
// 字符串数组,摄像头支持的拍照分辨率
const res = cmr.supportedImageResolutions[0]
// 字符串数组,摄像头支持的拍照文件格式
const fmt = cmr.supportedImageFormats[0]
// 进行拍照操作
cmr.captureImage((path) => {
// this.compressImage(path)
// path 图片地址
console.log(path)
},
(error) => {
console.log('Capture image failed: ' + error.message)
}, {
resolution: res,
format: fmt
})
属性 | 类型 | 作用 | 可取值 | 备注 |
crop | CameraCropStyles | 配置裁剪图片 | 设置裁剪图片项后,在拍照后会进入裁剪编辑界面,确认后返回裁剪后的图片。 | |
filename | String | 拍照或摄像文件保存的路径 | 可设置具体文件名(如"_doc/camera/a.jpg");也可只设置路径,以"/“结尾则表明是路径(如”_doc/camera/")。 如未设置文件名称或设置的文件名冲突则文件名由程序程序自动生成。 | |
format | String | 拍照或摄像的文件格式 | 可通过Camera对象的supportedImageFormats或supportedVideoFormats获取,如果设置的参数无效则使用系统默认值。 | |
index | String | 拍照或摄像默认使用的摄像头 | 拍照或摄像界面默认使用的摄像头编号,1表示主摄像头,2表示辅摄像头 | |
videoMaximumDuration | Number | 视频长度 | 单位为秒(s),小于等于0表示不限定视频长度。 默认值为0(不限定视频长度)。 注意:仅在调用拍摄视频(startVideoCapture)时有效。 | |
optimize | Boolean | 是否优化图片 | 自动调整图片的方向,在部分设备上可能出现图片方向不正确的问题,此参数将配置是否自动调整图片方向。 可取值: true - 自动调整图片方向; false - 不调整。 默认值为true。 注意:自动调整图片方向将消耗部分系统资源,可能会导致拍照后回调触发时机延迟,将此值设置为false则可避免延迟问题。 | |
resolution | String | 拍照或摄像使用的分辨率 | 可通过Camera对象的supportedImageResolutions或supportedVideoResolutions获取,如果设置的参数无效则使用系统默认值 | |
popover | PopPosition | 拍照或摄像界面弹出指示区域 | 对于大屏幕设备如iPad,拍照或摄像界面为弹出窗口,此时可通过此参数设置弹出窗口位置,其为JSON对象,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},默认弹出位置为屏幕居中 |
2.管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能
代码如下:示例
// 从系统相册选择文件(图片或视频) option GalleryOptions
plus.gallery.pick((res) => {
console.log(res.files);
}, function(e) {
console.log('取消选择图片');
}, {
filter: 'image',
multiple: true,
maximum: 3 // 可选数量
})
GalleryOptions
属性 | 类型 | 作用 | 可取值 | 备注 |
animation | Boolean | 是否显示系统相册文件选择界面的动画 | true/false | 平台支持 |
Android - 2.2+ (不支持) : | ||||
忽略此参数,无动画效果。 | ||||
iOS - 4.3+ (支持) : | ||||
支持动画效果。 | ||||
confirmText | String | 确认按钮文字 | 不传入此参数时,使用默认确认按钮文字“确定”。 | |
注意:HBuilderX3.1.5+版本支持。 | ||||
crop | GalleryCropStyles | 配置裁剪图片 | 配置裁剪图片 | |
editable | Boolean | 是否支持编辑图片 | true/false | 注意:HBuilderX3.1.5+版本支持 |
filename | String | 选择文件保存的路径 | 某些系统不能直接使用系统相册的路径,这时需要将选择的文件保存到应用可访问的目录中,可通过此参数设置保存文件的路径。 如果路径中包括文件后缀名称,则表明指定文件路径及名称,否则仅指定文件保存目录,文件名称自动生成。 | |
filter | GalleryFilter | 相册中选择文件类型过滤器 | 系统相册选择器中可选择的文件类型,可设置为仅选择图片文件(“image”)、视频文件(“video”)或所有文件(“none”),默认值为“image”。 | |
maximum | Number | 最多选择的图片数量 | 仅在支持多选时有效,取值范围为1到Infinity,默认值为Infinity,即不限制选择的图片数。 如果设置的值非法则使用默认值Infinity。 | |
multiple | Boolean | 是否支持多选图片 | 可从系统相册中选择多张图片,选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。 | |
onmaxed | Function | 超过最多选择图片数量事件 | 使用相册多选图片时,可通过maximum属性设置最多选择的图片数量,当用户操作选择的数量大于此时触发此事件。 | |
permissionAlert | Boolean | 是否检测权限 | 可取值: | |
true - 检测到用户没有授权访问相册,将会弹出提示框引导用户授权 | ||||
false - 检测到用户没有授权访问相册,触发错误回调,无界面提示 | ||||
默认值为false。 | ||||
popover | PopPosition | 相册选择界面弹出指示区域 | 对于大屏幕设备如iPad,相册选择界面为弹出窗口,此时可通过此参数设置弹出窗口位置。 其为JSON对象,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},所有值为像素值,左上坐标相对于容器的位置,默认弹出位置为屏幕居中。 | |
selected | Array[String | 已选择的图片路径列表 | 仅在多图片选择时生效,相册选择界面将选中指定的图片路径列表。 如果指定的路径无效,则忽略此项;如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。 | |
二、压缩图片
1.uniapp 压缩图片
代码如下(示例):
uni.compressImage({
src: url,
quality: 50, // 图片质量
width: 250, // 宽
height: 320, // 高
success: res => {
console.log('compressImage', res.tempFilePath)
},
fail: (err) => {
console.log(err.errMsg)
},
complete: () => {
// uni.hideLoading();
}
})
2.h5+压缩图片
代码如下(示例):
plus.zip.compressImage(
{
src: url, // src: (String 类型 )压缩转换原始图片的路径
dst: url, // 压缩转换目标图片的路径
quality: 90, // quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite: true, // overwrite: (Boolean 类型 )覆盖生成新文件
width: '250',
height: '320'
},
(susses) => {
console.log(susses)
console.log(url)
},
(error) => {
console.log(error)
}
)
三、录音
1.uniapp 录音
uni.getRecorderManager() | uni-app官网
总结
注意事项