angular封装cordova拍照和图片选择插件

在cordova工程中调用 拍照插件: cordova-plugin-camera,图片插件: com.synconset.imagepicker,
在HTML中的任何标签上加上封装好的属性,都可以调起拍照和图片选择功能

/**
 * 图片选择插件封装为:
 * 属性:select-image='true'
 */
app.directive("selectImage",function () {
    return {
        restrict: 'A',
        replace: false,
        template:'',
        controller:function () {

        },
        link:function (scope,element,attr) {
            element.on('click',function () {
                // 打开图片库
                navigator.camera.getPicture(onSuccess, onFail, {
                    quality: 50,                                       // 相片质量是50
                    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM, // 设置从图片库获取
                    destinationType: Camera.DestinationType.DATA_URL       // 以base64返回
                });
                function onSuccess(imageData) {
                    var image = document.getElementById('myImage');
                    image.src = "data:image/jpeg;base64," + imageData;
                    // ons.notification.alert("success");
                }

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

                //加载设备
                $(document).ready(function () {
                    document.addEventListener("deviceready", onDeviceReady, false);
                    function onDeviceReady() {
                        console.log(navigator.camera);
                        // ons.notification.alert('设备已就绪');
                    }


                })
            })
        }
    }
});
/**
 * 拍照插件封装为:
 * 属性:camera='true'
 */
app.directive("camera",function () {
    return{
        restrict: 'A',
        replace: false,
        template:'',
        controller:function () {

        },
        link:function (scope,element,attr) {
            element.on("click",function () {
                navigator.camera.getPicture(onSuccess, onFail, {
                    quality: 50,
                    destinationType: Camera.DestinationType.DATA_URL
                });
                // ons.notification.alert('将要拍照');
                function onSuccess(imageData) {
                    var image = document.getElementById('myImage');
                    image.src = "data:image/jpeg;base64," + imageData;
                    ons.notification.alert("成功");
                }
                function onFail(message) {
                    ons.notification.alert('出错: ' + message);
                }
                //加载设备
                $(document).ready(function () {
                    document.addEventListener("deviceready", onDeviceReady, false);
                    function onDeviceReady() {
                        console.log(navigator.camera);
                        // ons.notification.alert('设备已就绪');
                    }
                })
            })
        }
    }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值