cordova学习笔记_cordova插件的使用(camera)

之前一篇简单的介绍了项目的创建现在来看一下，cordova的插件如何使用。添加cordova的插件就可以调用手机原生的一些功能或者控件。
首先添加相机插件：

cordova plugin add cordova-plugin-camera

具体如何使用呢？

<div class="app">
    <div class="divUpload">
        <input type="button" value="选择图片" class="addButton" id="btnAddImg"/>
        <div id="showImg" class="imgShowDiv" align="center">
            <img id="imgShow" src="img/upload_img.png" class="imgShow"/>
        </div>
        <input type="button" value="上传图片" class="addButton" id="btnUploadImg"/>

    </div>


    <div id="divChoosePic" class="divChoosePic">
        <input type="button" value="拍照" class="chooseButton" id="btnChooseFromCamera">
        <input type="button" value="相册" class="chooseButton" id="btnChooseFromLocal">
        <input type="button" value="取消" class="chooseButton" id="btnCancelChoose">
    </div>
</div>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script>
    var divChoosePic = initView("divChoosePic");
    var imgShow = initView("imgShow");
    //添加联系人
    clickListener("btnAddImg", showChooseDiv);
    clickListener("btnChooseFromCamera", callTakePicture);
    clickListener("btnChooseFromLocal", addLocalPicture);
    clickListener("btnCancelChoose", cancelChoosePic);

    //拍照
    function callTakePicture() {
        showChooseDiv(2);
        navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL
        });

        function onSuccess(imageData) {
            //将选择的控件放到要显示的控件上
            imgShow.src = "data:image/jpeg;base64," + imageData;
        };

        function onFail(message) {
            alert('Failed because: ' + message);
        };


    };

    //选择本地图片
    function addLocalPicture() {
        showChooseDiv(1);

        navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY
        });

        function onSuccess(imageURL) {
            //将选择的控件放到要显示的控件上
            imgShow.src = "data:image/jpeg;base64," + imageURL;
        };

        function onFail(message) {
            navigator.notification.alert('Failed because:'+message,"操作提示","确定");
        };

    };


    function cancelChoosePic() {
        alert("取消");
        showChooseDiv(1);
    };

    //图片选择框显示隐藏
    function showChooseDiv(flag) {
        if (flag === 1) {//隐藏
            divChoosePic.style.display = "none";
            return;
        }
        if (flag === 2) {//显示
            divChoosePic.style.display = "block";
            return
        }
        divChoosePic.style.display = "block";
    };
</script>

以上。