4

我想问你..

我有一个代码......使用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 上调用图像裁剪，所以有一个上传按钮可以上传裁剪后的图像...

有人可以帮我吗？

4

2 回答 2

7

PhoneGap 没有内置裁剪功能。某些平台（当然是 iPhone）允许用户在用相机拍摄照片后裁剪照片，但如果您将 allowEdit = true 参数传递给 getPicture，则在将照片返回到您的 JavaScript 代码之前。但是您将无法通过脚本控制此处。

您必须自己从 JavaScript 实现裁剪功能。使用 HTML5 的 canvas 标签比预期的要容易。你可以在这里找到一个漂亮的教程。

于 2012-06-22T07:44:49.370 回答
2

我找到了解决方案（为时已晚，但用于像我这样的人）但是在拍摄图像后，您需要将图像路径传递给插件（本机 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 中添加此类并添加必要的权限。随时提出任何疑问。

于 2014-08-18T17:21:11.283 回答