cordova-plugin-camera及cordova-plugin-crop调用例程

最新推荐文章于 2023-06-16 13:04:42 发布

billnie

最新推荐文章于 2023-06-16 13:04:42 发布

阅读量2.3k

点赞数

分类专栏： Cordova ios

本文链接：https://blog.csdn.net/nxjbill/article/details/77098898

版权

ios 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Cordova

7 篇文章 0 订阅

订阅专栏

为了了解Cordova插件的使用和原理，练习了这两个插件的使用，以便创建vr场景编辑插件上手，记录下过程。
同时本例子中还有取设备信息及取软件版本号的插件。
1.加入插件

cordova plugin add cordova-plugin-crop
cordova plugin add cordova-plugin-camera

2.修正下cordova-plugin-crop中的错误

- (void) cropImage: (CDVInvokedUrlCommand *) command {
    UIImage *image;
    NSString *imagePath = [command.arguments objectAtIndex:0];
    NSDictionary *options = [command.arguments objectAtIndex:1];

    self.quality = options[@"quality"] ? [options[@"quality"] intValue] : 100;
    NSString *filePrefix = @"file://";

    if ([imagePath hasPrefix:filePrefix]) {
        imagePath = [imagePath substringFromIndex:[filePrefix length]];
    }

    NSBundle *bd;                                     //增加部分
    bd =[NSBundle mainBundle];                        //增加部分
    NSString *str;                                    //增加部分
    str = [bd bundlePath];                            //增加部分
    imagePath = [str stringByAppendingPathComponent:imagePath]; //增加部分
    if (!(image = [UIImage imageWithContentsOfFile:imagePath])) {
        NSDictionary *err = @{
                              @"message": @"Image doesn't exist",
                              @"code": @"ENOENT"
                              };
        CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsDictionary:err];
        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        return;
    }

    PECropViewController *cropController = [[PECropViewController alloc] init];
    cropController.delegate = self;
    cropController.image = image;

    CGFloat width = image.size.width;
    CGFloat height = image.size.height;
    CGFloat length = MIN(width, height);
    cropController.toolbarHidden = YES;
    cropController.rotationEnabled = NO;
    cropController.keepingCropAspectRatio = YES;

    cropController.imageCropRect = CGRectMake((width - length) / 2,
                                              (height - length) / 2,
                                              length,
                                              length);

    self.callbackId = command.callbackId;
    UINavigationController *navigationControlle强调内容r = [[UINavigationController alloc] initWithRootViewController:cropController];

    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        navigationController.modalPresentationStyle = UIModalPresentationFormSheet;
    }

    [self.viewController presentViewController:navigationController animated:YES completion:NULL];
}

3.编写html及js文件

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <head>
        <title>Device Ready Example</title>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var pictureSource;
            var destinationType;
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);

        }
        function buttonClick(){

        }
        function successFunction(){
            alert("successFunction");
        }
        function failFunction(){
            alert("failFunction");
        }

        function onDeviceReady() {
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
            console.log("onDeviceReady");
            console.log(device);
            console.log(device.cordova);   //获取当前cordova的版本，‘’
            console.log(device.model);     //device.model返回设备的模型或产品名称。该值由设备制造商设置，并且可能在同一产品的不同版本中不同。
            console.log(device.uuid);      //获取设备通用唯一标识uuid，例如：‘78ca1fe2c1d3b584’
            console.log(device.platform);  //获取操作系统名称，例如：‘Android’
            console.log(device.version);   //获取操作系统版本，例如：‘4.4.4’
            console.log(device.isVirtual); //判断设备是否在虚拟机上运行，在‘VS Emulator’返回false，所以这个不一定确实
            console.log(device.serial);    //获取设备序列号，例如：‘unknown’
            console.log(device.manufacturer);//获取设备制造商，例如：‘VS Emulator’

            cordova.getAppVersion.getVersionNumber().then(function(version){
                                                          alert(version);
                                                          });


                       navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,        destinationType: destinationType.DATA_URL });
        }
        function cropClick(){
            plugins.crop(function success (filepath) {
                         console.log(filepath);
                         var smallImage = document.getElementById('smallImage');
                         smallImage.style.display = 'block';
                         smallImage.src = filepath;
            }, function fail () {
                         console.log("fail");
            }, 'file://www/img/thumb.jpg', {quality: 30})
        }
        function onPhotoDataSuccess(imageData) {
            console.log(imageData);
            var smallImage = document.getElementById('smallImage');
            smallImage.style.display = 'block';
            smallImage.src = "data:image/jpeg;base64," + imageData;    }
        function onPhotoURISuccess(imageURI) {
            console.log(imageURI);
            var largeImage = document.getElementById('largeImage');
            largeImage.style.display = 'block';
            largeImage.src = imageURI;
        }
        function capturePhoto() {
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,        destinationType: destinationType.DATA_URL });
        }
        function capturePhotoEdit() {
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,        destinationType: destinationType.DATA_URL });    }
        function getPhoto(source) {
            navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,        destinationType: destinationType.FILE_URI,        sourceType: source });
        }
        function onFail(message) {      alert('Failed because: ' + message);    }
    </script>
    </head>
    <body onload="onLoad()">
        <p>ExampleObject</p>
        <button onclick="buttonClick()">自定义插件</button>
        <button onclick="cropClick()">裁图</button>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />
        <img id="cropimg" src="./img/logo.png" />
    </body>
</html>

4.一个完整的摄像头取图或是缩略图或是截图，就实现了，很简单吧，基本上不用写什么本地的代码，大部分框架实现了，主要专注于html和js就可以了。

billnie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cordova-plugin-camera及cordova-plugin-crop调用例程

为了了解Cordova插件的使用和原理，练习了这两个插件的使用，以便创建vr场景编辑插件上手，记录下过程。1.加入插件cordova plugin add cordova-plugin-cropcordova plugin add cordova-plugin-camera2.修正下cordova-plugin-crop中的错误- (void) cropImage: (CDVInvokedUrl
复制链接

扫一扫