Come si può spostare questa casella di ritaglio nativa con errori in un'app ibrida?

Question

Abbiamo un app ionico che accede $cordovaCamera in questo modo:

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

Ci sono più opzioni passate in, ecc, ma quanto sopra è solo dimostrando che stiamo passando nella bandiera allowEdit. Se qualcuno è poco familiare, ecco cosa dicono the docs:

AllowEdit: Consentire semplice l'editing delle immagini prima della selezione. (Booleano)

Questo funziona perfettamente. Dopo aver selezionato un'immagine dalla galleria o aver scattato una foto, questa passa alla sua visualizzazione "modifica" nativa, in cui l'utente può ritagliare l'immagine.

Ecco il flusso:

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

Su Android, è possibile ridimensionare il campo di coltura e spostare il campo del raccolto intorno.

Su iOS, non è possibile spostare il campo di ritaglio (a meno che non si esegua lo zoom per primo) e non è possibile ridimensionare il campo di ritaglio su tutti.

Questo è solo un capriccio di iOS con cui dobbiamo convivere, o c'è un modo per aggirare questo? Questo sta accadendo in iOS 8.3.

Screenshots in arrivo

Modifica

Here's the video demonstrating the problem.

Al 0:16 vedrai che è impossibile spostare il riquadro di ritaglio. (Questo sta accadendo su un iPod Touch con iOS 8.2, ma sta accadendo anche su diversi dispositivi iPhone 6 con iOS 8.2 e 8.3). Tuttavia, questo non si verifica su Android. Pertanto, sembra ragionevole ritenere che questo sia il problema nativo iOS piuttosto che un problema Ionic/Cordova (o, potrebbe essere un problema con il modo in cui Ionic interagisce con iOS).

A 0:22 si avrà una volta che l'utente esegue lo zoom, quindi l'utente può effettivamente spostare il riquadro di ritaglio.

Un altro aggiornamento (questo è importante)

Solo quando si scatta una foto si verifica questo bug. Quando si seleziona una foto esistente dalla libreria, lo strumento di ritaglio funziona come previsto ...

Answer 1

iOS è dotato di uno strumento di ritaglio se si abilita allowsEditing sul UIImagePickerController

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

Se si desidera un diversi strumenti di ritaglio che dovrai creare da soli o utilizzare un progetto open source.

Ecco alcuni progetti:

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

Answer 2

Nella nostra azienda ibrido mobile app usiamo raccolto ng-image. https://github.com/jodonnell-broadsoft/JsImageCrop

Consente agli utenti di scattare foto di immagini in Android e iOS utilizzando il plug-in della fotocamera e quindi consente di ritagliare l'immagine (la usiamo per i documenti). Quindi carichiamo l'immagine sul nostro server.

Ecco come appare la nostra versione finale. Inoltre è super fluido e facile da usare.

Una volta che si include il raccolto ng-immagine, quindi iniettare le dipendenze questo è tutto il codice si utilizza

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