Как вы можете переместить этот баггиный ящик урожая в гибридном приложении?

У нас есть приложение Ionic, которое обращается к $cordovaCamera следующим образом:

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

Есть больше опций, переданных и т.д., но приведенное выше просто показывает, что мы передаем флаг allowEdit. Если кто-то незнакомец, вот что docs говорит:

allowEdit. Разрешить простое редактирование изображения перед выбором. (Boolean)

Это прекрасно работает. После того, как я выберем картинку из галереи или сделаю снимок, она перейдет к собственному "редактированию" вида, где пользователь может обрезать изображение.

Здесь поток:

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

На Android вы можете изменить размер поля обрезки и перенести поле обрезки вокруг.

В iOS вы не можете перемещать поле обрезки (если только вы не увеличиваете масштаб), и вы не можете изменить размер поля обрезки.

Это просто причуда iOS, с которой нам нужно жить, или есть ли способ обойти это? Это происходит в iOS 8.3.

Скоро скриншоты

Изменить

Здесь показано видео, демонстрирующее проблему.

В 0:16 вы увидите, что невозможно переместить поле обрезки. (Это происходит на iPod Touch с iOS 8.2, но это также происходит на нескольких устройствах iPhone 6 с iOS 8.2 и 8.3). Однако это не происходит на Android. Таким образом, кажется разумным полагать, что это проблема с iOS на родном языке, а не проблема с Ionic/Cordova (или, может быть, проблема с тем, как Ionic взаимодействует с iOS).

В 0:22 вы будете, когда пользователь будет увеличивать масштаб изображения, тогда пользователь может реально переместить рамку обрезки.

Еще одно обновление (это важно)

Только при выполнении фото эта ошибка возникает. Когда вы выберите существующую фотографию из вашей библиотеки, инструмент обрезки работает как ожидалось...

Ответ 1

iOS имеет встроенный инструмент обрезки, если вы включите allowsEditing на UIImagePickerController

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

Если вам нужен другой инструмент обрезки, который вам нужно будет сделать самостоятельно или использовать проект с открытым исходным кодом.

Вот несколько проектов:

Ответ 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>