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

来源：互联网发布：jvcs500知乎编辑：程序博客网时间：2024/05/20 16:09

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

cordova plugin add cordova-plugin-cropcordova 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就可以了。

阅读全文

0 0