Stiamo sviluppando un'applicazione PhoneGap che, tra le funzioni principali sviluppate, include anche una sezione del profilo utente. All'interno di quella schermata/sezione permettiamo all'utente di aggiornare vari dettagli inclusa l'immagine del profilo. L'immagine del profilo può essere presa con la fotocamera (che funziona perfettamente) o scelta dalla libreria fotografica degli utenti. Questo è il nostro problema.Problema di rotazione dell'immagine PhoneGap dopo la trasformazione
Stiamo caricando una foto dalla fotocamera dell'utente o dal rullino fotografico utilizzando la funzione navigator.camera.getPicture.
Quindi creare un nuovo Image() e impostare il imageURI restituito dal divario telefonico come l'immagine src. Nella funzione onload dell'immagine si disegna l'immagine in un contesto di tela per ridimensionarla e ritagliarla in un quadrato.
abbiamo avuto un problema con l'immagine, dove quando rendendo l'immagine è stata schiacciata, ma abbiamo risolto quel problema con l'aiuto di questo post (HTML5 Canvas drawImage ratio bug iOS)
Il problema: tutto funziona bene quando arriviamo l'immagine direttamente dalla fotocamera ma quando impostiamo a navigator.camera.PictureSourceType.SAVEDPHOTOALBUM o navigator.camera.PictureSourceType.PHOTOLIBRARY l'immagine viene ruotata in modo errato.
correctOrientationè impostato su true.
Stiamo utilizzando Cordova 2.8
Possiamo solo ottenere i dati di immagine quando la DesignationType è FILE_URI per la macchina fotografica e NATIVE_URI per PHOTOLIBRARY. Questa differenza potrebbe avere qualcosa a che fare con il nostro problema?
Il codice è:
navigator.camera.getPicture(function (imageURI) {
context = // 2d context from canvas object in the DOM
base_image = new Image();
base_image.onload = function() {
var x = 0;
var y = 0;
var w = 144;
var h = 144;
... // some size and offset calculations
var ratio = ... // calculate a ratio based off this question https://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
context.drawImage(base_image, x, y, base_image.width, base_image.height, 0, 0, w, h/ratio);
url = context.canvas.toDataURL().toString();
DOMImage.src = url
}
base_image.src = imageURI;
}, function (error) {
enyo.log("Error " + error);
}, {
quality : 49,
targetWidth: 114,
targetHeight: 114,
sourceType: sourceType,
encodingType: Camera.EncodingType.JPEG,
destinationType: destinationType,
correctOrientation: true,
saveToPhotoAlbum: false
});
Ogni consiglio è molto apprezzato.
Hai capito? Sto affrontando lo stesso problema, Cordova 2.9 –