uniapp h5+ 拍照、录音功能实现

uniapp h5+ 拍照、录音功能实现

uniapp 功能实现

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

记录一些uniapp的功能实现

uniapp 扫码、拍照_mtl1994的博客-CSDN博客_uniapp 扫码

[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官网

---

总结

注意事项