修改

Question

我们有一个Ionic app来访问$cordovaCamera，如下所示：

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

传递了更多选项等，但上面只是表明我们正在传递allowEdit标志。如果有人不熟悉，请the docs说：

allowEdit ：在选择之前允许简单编辑图像。（布尔型）

这完美无缺。在我从图库中选择一张图片或拍照后，它会转到原生图片＃edit;编辑＆＃34;视图，用户可以裁剪图像。

这是流程：

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

在Android上，您可以调整裁剪区域的大小并移动裁剪区域。

在iOS上，您无法移动裁剪区域（除非您先放大），并且您无法调整裁剪区域的大小。

这只是我们不得不忍受的iOS怪癖，还是有办法解决这个问题？这种情况发生在iOS 8.3中。

即将推出的屏幕截图

修改

Here's the video demonstrating the problem

在 0:16 ，您会发现移动裁剪框是不可能的。（这种情况发生在配备iOS 8.2的iPod Touch上，但也出现在iOS 8.2和8.3的几款iPhone 6设备上）。但是，这不会发生在Android 上。因此，似乎有理由相信这是本机iOS问题而不是Ionic / Cordova问题（或者，它可能是Ionic与iOS交互方式的问题）。

在 0:22 ，您可以在用户放大后立即移动裁剪框。

另一次更新（这很重要）

仅当拍照时才会出现此错误。当您从库中选择现有照片时，裁剪工具会按预期工作...

Answer 1

如果您在allowsEditing

上启用UIImagePickerController，iOS会内置裁剪工具

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

如果你想要一个不同的裁剪工具，你将不得不自己制作或使用一个开源项目。

以下是一些项目：

Answer 2

在我们公司的混合移动应用中，我们使用ng-image crop。 https://github.com/jodonnell-broadsoft/JsImageCrop

它允许用户使用相机插件拍摄android和ios中的图像，然后让它们裁剪图像（我们将其用于文档）。然后我们将图像上传到我们的服务器。

以下是我们的最终版本。它也非常光滑，易于使用。

一旦你包含ng-image裁剪，然后注入依赖项，这就是你使用的所有代码

            <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>

如何在混合应用程序中移动这个有问题的本机裁剪框？

修改

另一次更新（这很重要）

2 个答案: