Cordova iOS应用中相机allowEdit属性失效问题求助

I've run into this exact issue before with Cordova's camera plugin on iOS—let me break down why this happens and how to fix it.

Why allowEdit Fails for Camera-Captured Images #

On iOS, the native UIImagePickerController behaves differently based on the source type:

• When selecting from the photo library, the allowEditing flag triggers the system's built-in crop/editor interface as expected.
• When using the camera as the source, iOS doesn't show an editor by default after taking a photo. The cordova-plugin-camera's allowEdit flag relies on this native behavior, so it won't work for camera-captured images.

Solution 1: Use a Dedicated Crop Plugin (Most Reliable) #

The best fix is to capture the full-resolution photo first, then use a separate crop plugin to handle editing. Here's how to implement this with cordova-plugin-crop:

1. Install the crop plugin:

cordova plugin add cordova-plugin-crop

2. Modify your camera code to capture first, then crop:

function onPhotoDataSuccess(imageURI) {
  // Pass the captured image URI to the crop plugin
  window.plugins.crop.promise(imageURI, {
    quality: 100,
    targetWidth: 600, // Adjust dimensions to your needs
    targetHeight: 600,
    correctOrientation: true
  })
  .then(function(croppedImageURI) {
    // Convert cropped URI to DATA_URL if you need that format
    convertToDataURL(croppedImageURI);
  })
  .catch(function(error) {
    console.error("Crop failed: ", error);
    onFail(error);
  });
}

function convertToDataURL(imageURI) {
  var canvas = document.createElement('canvas');
  var img = new Image();
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/jpeg', 1.0);
    // Use the final dataURL in your app logic here
    console.log("Cropped image data URL: ", dataURL);
  };
  img.src = imageURI;
}

// Updated camera call (remove allowEdit—we'll handle cropping manually)
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
  quality: 100,
  destinationType: navigator.camera.DestinationType.FILE_URI, // Better performance than DATA_URL
  correctOrientation: true,
  sourceType: navigator.camera.PictureSourceType.CAMERA
});

function onFail(message) {
  alert('Failed because: ' + message);
}

function onSuccess() {
  console.log("Camera cleanup successful");
}
navigator.camera.cleanup(onSuccess, onFail);

Solution 2: Custom Native Code (Less Maintainable) #

If you want to stick to iOS's native editor, you can modify the plugin's native code (note: this will break if you update the plugin later):

• Open your project's platforms/ios/[YourAppName]/Plugins/cordova-plugin-camera/CDVCamera.m file.
• Find the section where UIImagePickerController is initialized for the camera source.
• Add custom code to manually present the system's editor view controller after the photo is captured.

Key Tips #

• Using FILE_URI instead of DATA_URL improves performance, especially with high-quality photos.
• The crop plugin gives you more control over crop dimensions and quality compared to the native allowEdit flag.

内容的提问来源于stack exchange，提问作者Abilash Bansal