5. Cordova照相机和阶段性分析

阶段性分析

第一阶段,入门。

第二阶段,到这里自我感觉算是差不多基本入门了,接下来打算做一些常用API练习,就比如这个插件主要用于拍照或使用图库文件,还有一些文件操作,IO之类的,计划一周左右实现。

第三阶段,对DB还有原生交互兼容性等进行深入研究,解决一些碰到的问题,此阶段不设时长,预计此阶段会有项目,所以切换到下班回去做。

第四阶段,如果时间还比较充裕的话,打算制作一款HybridAPP软件,在Android,IOS上都能跑通的(前提是有OSX环境),预计10个工作日左右吧。

Cordova照相机

用于拍照或使用图库文件

  • 添加插件

    cordova plugin add cordova-plugin-camera
  • 添加按钮

    <button id = "takePicture">TAKE PICTURE</button>
    <button id = "getPicture">TAKE PICTURE</button>
    <img id = "myImage" class="imgcenter" src="img/image.png"/>

    我这里有点小问题,照片会很大,超出屏幕了,用css设置一下

    .imgcenter{
    align-content: center;
    width:100%;
    height:90%;
    }
  • 添加事件监听器

    //拍照监听器
    document.getElementById("takePicture").addEventListener("click", cameraTakePicture);
    //图库监听器
    document.getElementById("getPicture").addEventListener("click",cameraGetPicture);
  • 添加功能

    //执行相机操作的函数,调用了成功和失败两个回调函数
    function cameraTakePicture() {
        navigator.camera.getPicture(onSuccess, onFail, {
        //照片质量
        quality: 50,
        //照片类型
        destinationType: Camera.DestinationType.DATA_URL
        //保存到相册
        saveToPhotoAlbum: true
        });
    //成功的回调函数,如果成功就更新到img
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
        }
    //如果失败就更新失败原因
    function onFail(message) {
        alert('Failed because: ' + message);
        }
    }
    //获取图库的回调函数,只是多了一个sourceType参数
    function cameraGetPicture(){
     navigator.camera.getPicture(onSuccess, onFail, { 
     quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        //下面这两个方法都可以获取到相册,这也是和获取相机唯一的区别
        //sourceType: Camera.PictureSourceType.PHOTOLIBRARY
         sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
     });
    
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/png;base64," + imageData;
     }
    
    function onFail(message) {
        alert('Failed because: ' + message);
     }
    
    }
  • 问题

    1. 我更新插件的时候提示cordova-plugin-compat无法更新,这时候卸载了再执行添加相机插件,cordova会自动更新最新版的compat插件
    2. 卸载compat组件的时候,如果提示有依赖,无法卸载,就把依赖的先卸载了,然后在卸载
    3. 当然这不是最优解决方案,因为刚配置环境的时候我没有卸载自带的,所以才会出现这些问题,导致compat无法更新,所以配置好环境的时候,如果有组件的话,先卸载了,用到哪些装哪些即可,毕竟这些库都会占内存
  • 展示

failed.png

!
![Uploading final_832690.png …]

final.png

getpicture.png

主要方法

参数说明
quality在0-100的范围内的图像质量。默认值是50
destinationTypeDATA_URL 或 0 返回base64编码字符串
FILE_URI 或 1 返回图像文件URI
NATIVE_URI 或 2 返回图像本地URI
sourceTypePHOTOLIBRARY 或 0 打开照片库
CAMERA 或 1 打开机摄像头
SAVEDPHOTOALBUM 或 2 打开保存相册
allowEdit允许图像编辑
encodingTypeJPEG 或 0 返回JPEG编码的图像
PNG 或 1 返回PNG编码的图像
targetWidth图像中的像素缩放宽度
targetHeight图像中的像素比例的高度
mediaTypePICTURE 或 0 只允许选择照片
VIDEO 或 1 只允许选择视频
ALLMEDIA 或 2 允许选择所有媒体类型
correctOrientation用于校正图象的方向
saveToPhotoAlbum用于将图像保存到相册
popoverOptions用于在IOS设置弹出的位置
cameraDirectionFRONT 或 0 前置摄像头
BACK 或 1 后置摄像头
ALLMEDIA所有媒体
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值