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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能

代码如下：示例

// 从系统相册选择文件（图片或视频） option GalleryOptions
plus.gallery.pick((res) => {
    console.log(res.files); 
}, function(e) {
    console.log('取消选择图片');
}, {
    filter: 'image',
    multiple: true,
    maximum: 3 // 可选数量
})
1
2
3
4
5
6
7
8
9
10

GalleryOptions

二、压缩图片

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();
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、录音

1.uniapp 录音

uni.getRecorderManager() | uni-app官网

---

总结

注意事项