1.新建Cordova项目,在项目目录里添加插件
cordova plugin add cordova-plugin-camera
cordova plugin add --save cordova-plugin-crop
2. 在Vue项目的index.html中引入Cordova.js并添加设备监听函数
注:npm run dev的时候要把引入和监听函数注释掉,因为这样在PC端跑不起来,在手机里才可以。
3.在需要调取摄像头的地方加入代码
比如我在一个“打开相机”的按钮上点击事件绑定了一个函数,叫getCamera,代码如下
getCamera: function(){
//打开照相机
navigator.camera.getPicture(function(imageURI){
//打开摄像头成功的回调
plugins.crop(function success (imageURI) {
//裁剪成功的回调
console.log(imageURI)
}, function fail () {
//裁剪失败的回调
}, imageURI, {quality: 30}) //quality为照片质量
},function(){
//打开摄像头失败的回调
}, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
}
详解:
只打开摄像头的函数为
navigator.camera.getPicture(function(imageURI){
console.log(imageURI)
},function(err){
console.log(err)
},
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
})
第一个参数是打开成功执行的函数,
第二个参数是打开失败执行的函数,
第三个参数是一个对象,可选参数有:
quality:照片质量,Number类型,可选1-100
Camera.DestinationType:相机返回的图片格式:
1. DATA_URL 返回图片Base64
2. FILE_URI 返回图片原生的URI路径(安卓)
3. NATIVE_URI 返回图片原生的URI路径(IOS)
Camera.PictureSourceType:选择图片的方式
1. PHOTOLIBRARY 打开相册获取(安卓)
2. CAMERA 打开相机拍照
3. SAVEDPHOTOALBUM 打开相册获取(IOS)
Camera.MediaType:选择的图片类型
1. PICTURE 只许选择图片
2. VIDEO 只许选择视频
3. ALLMEDIA 可以选择全部格式
裁剪照片的函数为:
plugins.crop(function success (imageURI) {
//裁剪照片,成功后的回调
console.log(imageURI)
}, function fail (err) {
console.log(imageURI)
}, imageURI,
{ quality: 30 }
)
第一个参数:执行成功的回调
第二个参数:执行失败的回调
第三个参数:图片路径。(注:裁剪插件的输入路径只能是图片的本地路径,Base64是不可以的,并且输出路径也是本地路径,如果需要Base64格式需要再转化)
第四个参数:对象,可选参数没啥,基本就只有quality这个有用。
不要觉得年纪轻轻就到了低谷,人生还有很大的下降空间。