一、插件简介

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


二、效果预览
在App端测试效果如下:

体验DEMO(安卓浏览器扫码下载)


三、开始使用

(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

vue+uniapp实现照录像,相册选择 | 图片裁剪压缩,视频压缩的更多相关文章

  1. IOS研究院之打开照相机与本地相册选择图片(六)

    原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:IOS研究院之打开照相机与本地相册选择图片(六) Hello 大家好 IOS的文章好久都木有更新了,今天更新一篇哈. 这篇文章主要学习 ...

  2. [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现

    [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...

  3. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  4. 微信小程序:从本地相册选择图片或使用相机拍照。

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...

  5. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  6. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

  7. node.js中使用imagemagick进行图片裁剪压缩

    node.js中使用imagemagick进行图片裁剪压缩 安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...

  8. ng-cordova 手机拍照或从相册选择图片

    1.需求描述 实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能 2.准备 1) 安装ng-cordova 进入到ionic工程目录,使用bower工具安装, bower ...

  9. IOS研究院之打开照相机与本地相册选择图片

    如下图所示 在本地相册中选择一张图片后,我们将他拷贝至沙盒当中,在客户端中将它的缩略图放在按钮旁边,这个结构其实和新浪微薄中选择图片后的效果一样.最终点击发送将按钮将图片2进制图片上传服务器. 下面我 ...

随机推荐

  1. 城市防汛应急管理智慧 Web GIS 可视化平台

    前言 今年第 17 号台风"狮子山"(热带风暴级)登陆海南岛,受"狮子山"影响,海南岛北半部地区出现暴雨到大暴雨.局地特大暴雨.台风带来的强风雨导致海南岛多地树 ...

  2. 蓝绿部署、滚动部署、金丝雀(Canary)发布、灰度发布、A/B测试

    最近看到Canary发布,一时没有反应过来是什么,一查才发现就是鼎鼎有名的金丝雀发布,发现经常一起出现的还有灰度发布.蓝绿部署.滚动部署.A/B测试,故一起学习一下这几个概念. 1. 蓝绿部署 目的: ...

  3. NCBI SRA数据如何进行md5校验?

    下了一些sra数据库中的公共数据,因为pretech和aspera不稳定,稍微大点的文件经常传断,部分文件我只能通过本地下载再上传. 那么问题来了,sra没有md5校验,我怎么知道我数据的完整性,尤其 ...

  4. Anaconda建立新的环境,出现CondaHTTPError: HTTP 000 CONNECTION FAILED for url ...... 解决过程

    2020.3.7准备scrapy,使用anaconda创建一个新的环境,执行"conda create -n scrapyEnv python=3.6",结果出现了"Co ...

  5. mingling

    mysql> USE mon Reading table information for completion of table and column names You can turn of ...

  6. ZAQI

    mysql> CREATE TABLE emploee ( -> name CHAR(64) NOT NULL, -> email CHAR(64), -> password ...

  7. Linux之crond任务调度

    1. 示意图 2. 基本语法 crontab [选项] # -e : 编辑crontab定时任务 # -l : 查询crontab # -r : 删除当前用户所有的crontab任务 # 例子: # ...

  8. Oracle-除了会排序,你对ORDER BY的用法可能一无所知!

    导读 为什么只有ORDER BY后面可以使用列别名 为什么不推荐使用ORDER BY后接数字来排序 为什么视图和子查询里面不能使用ORDER BY -- ​小伙伴们在进行SQL排序时,都能很自然的使用 ...

  9. 业务逻辑审批流、审批流、业务、逻辑、面向对象、工作方式【c#】

    ------需求分析:--------1.先按照实际线下流程说这是什么事情,实际要干什么.2.再转换为面向对象-页面的操作流程,演示demo3.再与相关人员沟通是否可行需要什么地方修正.4.最终:线上 ...

  10. 在idea的java开发中字符串length()方法获取长度与赋值不符的问题

    最近在开发中用到length()方法获取中文字符串的长度,发现获得的长度与实际不符.比如个String类型赋值为"中",但获取长度却是2. 这让我百思不得其解,后来突然想起来我在研 ...