我想问你..
我有一个代码...使用phonegap ..但我对从相机/文件管理器拿走后如何调用/裁剪图像感到困惑...
这里的代码......
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReady = false;
/**
* Take picture with camera
*/
function takePicture() {
navigator.camera.getPicture(
function(uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
window.location.hash = "#page2";
/*document.getElementById('camera_status').innerHTML = "Success"; */
},
function(e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
},
{ quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, targetWidth: 1153, targetHeight: 385
}
);
};
/**
* Select picture from library
*/
function selectPicture() {
navigator.camera.getPicture(
function(uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
window.location.hash = "#page2";
},
function(e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
},
{ quality: 50, targetWidth: 1153, targetHeight: 385, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
};
/**
* Upload current picture
*/
function uploadPicture() {
// Get URI of picture to upload
var img = document.getElementById('camera_image');
var imageURI = img.src;
if (!imageURI || (img.style.display == "none")) {
document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
return;
}
// Verify server has been entered
server = document.getElementById('serverUrl').value;
if (server) {
// Specify transfer options
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
options.chunkedMode = false;
// Transfer picture to server
var ft = new FileTransfer();
$.mobile.showPageLoadingMsg();
ft.upload(imageURI, server, function(r) {
document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
viewUploadedPictures();
$.mobile.hidePageLoadingMsg();
window.location.hash = "#page3";
}, function(error) {
$.mobile.hidePageLoadingMsg();
document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;
}, options);
}
}
/**
* View pictures uploaded to the server
*/
function viewUploadedPictures() {
// Get server URL
server = document.getElementById('serverUrl').value;
if (server) {
// Get HTML that lists all pictures on server using XHR
var xmlhttp = new XMLHttpRequest();
// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState === 4){
// HTML is returned, which has pictures to display
if (xmlhttp.status === 200) {
document.getElementById('server_images').innerHTML = xmlhttp.responseText;
}
// If error
else {
document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
}
}
};
xmlhttp.open("GET", server , true);
xmlhttp.send();
}
}
/**
* Function called when page has finished loading.
*/
function init() {
document.addEventListener("deviceready", function() {deviceReady = true;}, false);
window.setTimeout(function() {
if (!deviceReady) {
alert("Error: PhoneGap did not initialize. Demo will not run correctly.");
}
},2000);
}
</script>
</head>
<body onload="init();">
<!-- Page 1 -->
<div data-role="page" id="page1">
<!-- Page 1 Header -->
<div data-role="header">
<h1>Ambil Gambar</h1>
</div>
<!-- Page 1 Content -->
<div data-role="content">
<center>
<a href="javascript:void(0)" onclick="takePicture();">
<img src="image/camera.png" width="150px" height="150px">
</a>
<br>
<br>
<b>Atau</b>
<br>
<br>
<a href="javascript:void(0)" onclick="selectPicture();">
<img src="image/upload.png">
</a>
</center>
</div>
<!-- Page 1 Footer -->
<div data-role="footer">
<h4>Footer 1</h4>
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<!-- Page 2 Header -->
<div data-role="header">
<h1>Header 2</h1>
</div>
<!-- Page 2 Content -->
<div data-role="content">
<img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" />
<input type="button" onclick="uploadPicture();" value="Upload Picture" />
<input id="serverUrl" type="text" value="http://kiosban.com/android/camera/upload.php" />
Status : <span id="camera_status"></span>
<a href="#page3">Skip</a>
</div>
<!-- Page 2 Footer -->
<div data-role="footer">
<h4>Footer 2</h4>
</div>
</div>
<!-- Page 3 -->
<div data-role="page" id="page3">
<!-- Page 3 Header -->
<div data-role="header">
<h1>Header 3</h1>
</div>
<!-- Page 3 Content -->
<div data-role="content">
<div id="server_images"></div>
<h3>Server:</h3>
<b>Images on server:</b>
<div id="server_images"></div>
<input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
</div>
<!-- Page 2 Footer -->
<div data-role="footer">
<h4>Footer 2</h4>
</div>
</div>
</body>
</html>
我想在＃page2上调用图片裁剪，因此有一个上传按钮可以上传裁剪的图片......
任何人都可以帮我这么做吗？
答案 0 :(得分：7)
PhoneGap没有内置裁剪功能。某些平台（肯定是iPhone）允许用户在使用相机拍摄后拍摄照片，但是之前如果你传递了allowEdit = 它将返回到你的JavaScript代码getPicture的true参数。但是你的脚本无法控制。
您必须自己从JavaScript实现裁剪功能。使用HTML5的canvas标签比预期更容易。你可以找到一个漂亮的教程here。
答案 1 :(得分：2)
我找到了解决方案（现在已经太晚了，但是对于像我这样的人使用）但是在拍摄图像之后你需要将图像路径传递给插件（Native android）进行裁剪。
将以下代码放入图片捕获中或从图库中选择图片（在index.html中）：
navigator.camera.getPicture(function(imageURI){
window.resolveLocalFileSystemURI(imageURI, function(fileEntry){
fileEntry.file(function(fileObj) {
var imagedata ="sample/new001.img";
// able to get the image location using phonegap
cropImage.createEvent(imagedata);
});
}, fail);
}, fail, { quality: 50,
destinationType: destinationType.NATIVE_URI,
sourceType: pictureSource.PHOTOLIBRARY
});
之后 crop.image.js 应该是（在index.html中包含此文件名）
var cropImage = {
createEvent: function(fileName) {
cordova.exec(
null, // success callback function
null, // error callback function
'CropImage', // mapped to our native Java class called "CropImage"
'GetImageName', // with this action name
[fileName]
);
}
}
您的Java代码就像
public class CropImage extends CordovaPlugin{
public final String ACTION_GET_IMAGE_NAME = "GetImageName";
Uri myUri;
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
// Log.e(TAG,"Inside Version plugin.");
boolean result = false;
if(action.equals(ACTION_GET_IMAGE_NAME)) {
try {
myUri = Uri.parse(args.getString(0));
cropCapturedImage(myUri);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
result = true;
}
return result;
}
public void cropCapturedImage(Uri picUri){
//call the standard crop action intent
Intent cropIntent = new Intent("com.android.camera.action.CROP");
//indicate image type and Uri of image
cropIntent.setDataAndType(picUri, "image/*");
//set crop properties
cropIntent.putExtra("crop", "true");
cropIntent.putExtra("aspectX", 1);
cropIntent.putExtra("aspectY", 1);
cropIntent.putExtra("outputX", 256);
cropIntent.putExtra("outputY", 256);
// for save the image in same location with same name.
File f = new File(Environment.getExternalStorageDirectory()+"your image location here");
cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(f));
cropIntent.putExtra("output", Uri.fromFile(f));
cropIntent.putExtra("return-data", false);
//start the activity - we handle returning in onActivityResult
this.cordova.startActivityForResult((CordovaPlugin) this,cropIntent, 2);
}
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
//Log.e("final", String.valueOf(requestCode));
/*if(requestCode == 2){
//Create an instance of bundle and get the returned data
Bundle extras = intent.getExtras();
//get the cropped bitmap from extras
Bitmap thePic = extras.getParcelable("data");
}*/
}
}
不要忘记在CONFIG.XML中添加此类并添加必要的权限。随意提出任何疑问。