为了了解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就可以了。