vue+uniapp实现照录像,相册选择 | 图片裁剪压缩,视频压缩
一、插件简介
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实现照录像,相册选择 | 图片裁剪压缩,视频压缩的更多相关文章
- IOS研究院之打开照相机与本地相册选择图片(六)
原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:IOS研究院之打开照相机与本地相册选择图片(六) Hello 大家好 IOS的文章好久都木有更新了,今天更新一篇哈. 这篇文章主要学习 ...
- [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现
[Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- 微信小程序:从本地相册选择图片或使用相机拍照。
wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片
图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...
- node.js中使用imagemagick进行图片裁剪压缩
node.js中使用imagemagick进行图片裁剪压缩 安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...
- ng-cordova 手机拍照或从相册选择图片
1.需求描述 实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能 2.准备 1) 安装ng-cordova 进入到ionic工程目录,使用bower工具安装, bower ...
- IOS研究院之打开照相机与本地相册选择图片
如下图所示 在本地相册中选择一张图片后,我们将他拷贝至沙盒当中,在客户端中将它的缩略图放在按钮旁边,这个结构其实和新浪微薄中选择图片后的效果一样.最终点击发送将按钮将图片2进制图片上传服务器. 下面我 ...
随机推荐
- 【CTSC1999】【带权并查集 】月亮之眼
Description 吉儿是一家古董店的老板娘,由于她经营有道,小店开得红红火火.昨天,吉儿无意之中得到了散落民间几百年的珍宝-月亮之眼.吉儿深知"月亮之眼"价值连城:它是由许多 ...
- 洛谷 P3676 - 小清新数据结构题(动态点分治)
洛谷题面传送门 题目名称好评(实在是太清新了呢) 首先考虑探究这个"换根操作"有什么性质.我们考虑在换根前后虽然每个点的子树会变,但整棵树的形态不会边,换句话说,割掉每条边后,得到 ...
- Codeforces 889E - Mod Mod Mod(dp+状态设计)
Codeforces 题目传送门 & 洛谷题目传送门 题目名称 hopping 我们记 \(x_i=X\bmod a_1\bmod a_2\bmod\dots\bmod a_i\),也就是 \ ...
- 用 AppImage文件创建快捷图标和软连接
背景 AppImage是一种在Linux系统中用于分发便携式软件而不需要超级用户权限来安装它们的格式.[1] 它还试图允许Linux的上游开发者来分发他们的程序而不用考虑不同Linux发行版间的区别. ...
- vs2019 16.8更新之后的 C++20 协程co_yield用法
由于搜索出来的帖子,都是老版本的实验协程,很多老的代码已经失去参考性,并且很复杂,所以就自己研究了一下. 1 #include <iostream> 2 #include <coro ...
- MySQL全面瓦解29:使用Partition功能实现水平分区
1 回顾 上一节我们详细讲解了如何对数据库进行分区操作,包括了 垂直拆分(Scale Up 纵向扩展)和 水平拆分(Scale Out 横向扩展) ,同时简要整理了水平分区的几种策略,现在来回顾一下. ...
- day33 前端之css
day33 前端之css css简介 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. # 语法结构 选择器 { 属性名1,属性值 属性名2,属性值 } # ...
- Swagger2异常 java.lang.NumberFormatException: For input string: ""
问题在访问swagger首页时报错: java.lang.NumberFormatException: For input string: "" at java.lang.Numb ...
- EasyExcel读写Excel
使用过 poi 的开发同学可能都有此体会,每次都要写一坨代码,最后的代码如下面一样: 这样的代码是不是又臭又长?当字段数量多的时候,一不小心还容易写错.阿粉还记得当初使用 poi 导出一个二十多字段的 ...
- Linux学习 - 文件特殊权限
一.SUID权限(只针对文件) 只有可执行的二进制程序才能设定SUID权限 命令执行者要对该程序拥有x(执行)权限 1 拥有SUID的文件 /usr/bin/passwd 2 功能: 命令执行者(其他 ...