PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    vue+uniapp实现照录像,相册选择 | 图片裁剪压缩,视频压缩

    作者:admin来源:网络浏览:时间:2020-11-25 22:36:34我要评论
    导读:Zhimi-Camera(智密 - 智密 - 相机图册插件-视频/图片选择器)是一个支持拍照,录像,相册选择功能,自带图片裁剪,图片压缩,视频压缩,...

    Zhimi-Camera(智密 - 智密 - 相机图册插件-视频/图片选择器)是一个支持拍照,录像,相册选择功能,自带图片裁剪,图片压缩,视频压缩,选择数量限制的uniapp原生插件。
    平台支持:Android、IOS

    (1): 引入插件

    首先创建工程,添加完原生插件之后,需要引入插件

    var Camera = uni.requireNativePlugin('Zhimi-Camera')
    具体的API在插件市场的API文档中可以查阅,有定制需求或bug提交的也可以自行联系客服微信(zhimitec)



    (2): 获取权限

    由于安卓与IOS在读写相册,获取摄像头的时候需要先获取权限,Zhimi-Camera自带前置的权限检查,当且仅当用户同意权限请求才会触发方法



    (3): 录像/拍照

    当我们需要进行录像/拍照操作的时候,可以通过以下API进行操作


    Camera.openCamera(ActionOption, ret => {
      // 当用户拍照/录像时候将会回调数据
      // ret.type = photo | video
      // photo: 照片
      // video: 视频
      // ret.type = photo时,ret.imagePath 为照片路径
      // ret.type = video时,ret.videoPath 为视频路径
    })

    录像还是拍照,我们可以通过ActionOption中的action和type进行限制,ActionOption的传值如下

    ActionOption = {
      type: 'photo', // photo: 照片 | video: 视频
      action: 'takePhoto', // takePhoto: 拍照 | record: 录像
    }


    (4): 选择图片/视频

    当我们需要选择图片/视频的时候,可以通过以下API进行操作


    Camera.openAlbum(ActionOption, ret => {
      // 当用户选择图片/视频时候将会回调数据
      // ret.type = photo | video
      // photo: 照片
      // video: 视频
      // ret.type = photo时,ret.imagePaths 为照片路径数组
      // ret.type = video时,ret.videoPath 为视频路径
    })

    选择图片还是视频,我们可以通过ActionOption中的type进行限制,而选择图片还可以通过maxNum确定最大数量,ActionOption的传值如下

    ActionOption = {
      type: 'photo', // photo: 照片 | video: 视频
      maxNum: 9, // maxNum: 最大数量(拍照/录像/选择视频时固定为1),0为无限制
    }


    (5): 注意点

    由于需要进行图片/视频压缩,因此我们会将源文件进行复制一份并且操作(转码,压缩),返回给开发者的为复制后的文件路径,如果仅仅是做上传操作之后不需要进行其他操作,开发者可以通过plus.io下的api删除该临时文件,具体参考html5plus官方文档:https://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileEntry.remove
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6455-1.html