admin管理员组

文章数量:1404054

We have an Ionic app that accesses $cordovaCamera like so:

$cordovaCamera.getPicture({ allowEdit: true });

There are more options passed in, etc., but the above is just showing that we're passing in the allowEdit flag. If anyone is unfamiliar, here's what the docs say:

allowEdit: Allow simple editing of image before selection. (Boolean)

This works perfectly. After I select a picture from the gallery or take a picture, it then goes to its native "edit" view, where the user can crop the image.

Here's the flow:

Take Photo > Edit (crop) > Upload to the interwebs
Select Photo > Edit (crop) > Upload to the interwebs

On Android, you can resize the crop field and move the crop field around.

On iOS, you can't move the crop field (unless you zoom in first), and you can't resize the crop field at all.

Is this just an iOS quirk we have to live with, or is there some way to get around this? This is happening in iOS 8.3.

Screenshots ing soon

Edit

Here's the video demonstrating the problem.

At 0:16 you'll see that it's impossible to move the crop box. (This is happening on an iPod Touch with iOS 8.2, but it is also happening on several iPhone 6 devices with both iOS 8.2 and 8.3). However, this does not occur on Android. Thus, it seems reasonable to believe this is native iOS issue rather than an Ionic/Cordova issue (or, it may be an issue with the way Ionic interacts with iOS).

At 0:22 you'll that once the user zooms in, then the user can actually move the crop box.

Another update (this is important)

Only when taking a photo does this bug occur. When you select an existing photo from your library, the crop tool works as expected...

We have an Ionic app that accesses $cordovaCamera like so:

$cordovaCamera.getPicture({ allowEdit: true });

There are more options passed in, etc., but the above is just showing that we're passing in the allowEdit flag. If anyone is unfamiliar, here's what the docs say:

allowEdit: Allow simple editing of image before selection. (Boolean)

This works perfectly. After I select a picture from the gallery or take a picture, it then goes to its native "edit" view, where the user can crop the image.

Here's the flow:

Take Photo > Edit (crop) > Upload to the interwebs
Select Photo > Edit (crop) > Upload to the interwebs

On Android, you can resize the crop field and move the crop field around.

On iOS, you can't move the crop field (unless you zoom in first), and you can't resize the crop field at all.

Is this just an iOS quirk we have to live with, or is there some way to get around this? This is happening in iOS 8.3.

Screenshots ing soon

Edit

Here's the video demonstrating the problem.

At 0:16 you'll see that it's impossible to move the crop box. (This is happening on an iPod Touch with iOS 8.2, but it is also happening on several iPhone 6 devices with both iOS 8.2 and 8.3). However, this does not occur on Android. Thus, it seems reasonable to believe this is native iOS issue rather than an Ionic/Cordova issue (or, it may be an issue with the way Ionic interacts with iOS).

At 0:22 you'll that once the user zooms in, then the user can actually move the crop box.

Another update (this is important)

Only when taking a photo does this bug occur. When you select an existing photo from your library, the crop tool works as expected...

• javascript
• android
• ios
• cordova
• ionic-framework

Share Improve this question Follow edited Aug 5, 2015 at 18:13 Josh Beam asked Jul 31, 2015 at 18:25 Josh BeamJosh Beam 19.8k55 gold badges4747 silver badges6969 bronze badges 1

• It's a native iOS issue, but it's always been there, I don't think apple will fix it or even if they consider it a bug. The only way to "fix" it, is to create your own native UI and crop mechanism, or pick the whole image and crop it inside a canvas – jcesarmobile Commented Aug 4, 2015 at 8:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

iOS has a built in cropping tool if you enable allowsEditing on your UIImagePickerController

UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
[imagePicker setAllowsEditing:YES];

If you want a different cropping tool you are going to have to make your own or use an open source project.

Here are some projects:

• https://github./dzenbot/DZNPhotoPickerController
• https://github./ruslanskorb/RSKImageCropper
• https://github./kishikawakatsumi/PEPhotoCropEditor

In our pany hybrid mobile app we use ng-image crop. https://github./jodonnell-broadsoft/JsImageCrop

It allows users to take photos of images in android and ios using the camera plugin and then lets them crop the image (we use it for documents). We then upload the image to our server.

Here is what our final version looks like. Also it is super smooth and easy to use.

Once you include the ng-image crop, then inject the dependencies this is all the code you use

            <div class="cropArea" ng-style="cropHeight">
                <img-Crop image="image.uncropped" result-image="image.cropped" result-image-format="image/png" area-type="rectangle" on-change="console.log($scope.image.cropped)">

                </img-Crop>
            </div>

本文标签： javascriptHow can you move this buggy native crop box in a hybrid appStack Overflow