Problem z rotacją obrazu PhoneGap po transformacji

Question

Opracowujemy aplikację PhoneGap, która jest jedną z głównych funkcji opracowywanych, zawiera także sekcję profilu użytkownika. W ramach tego ekranu/sekcji pozwalamy użytkownikowi aktualizować różne szczegóły, w tym obraz profilu. Obraz profilu można wykonać za pomocą kamery (która działa doskonale) lub wybrać ją z biblioteki zdjęć użytkowników. Tutaj leży nasz problem.

Ładowanie obrazu z aparatu użytkownika lub rolki aparatu za pomocą funkcji navigator.camera.getPicture.

Następnie tworzymy nowy Image() i ustawiamy imageURI zwracany przez przerwę telefoniczną jako obraz src. W funkcji obrazu obrazu narysujemy obraz w kontekście płótna, aby zmienić rozmiar i przyciąć go do kwadratu.

Mieliśmy problem z obrazem, gdzie podczas renderowania obraz został zgnieciony ale Naprawiliśmy ten problem za pomocą tego postu (HTML5 Canvas drawImage ratio bug iOS)

Problem: Wszystko działa dobrze, gdy mamy obraz bezpośrednio z kamery, ale po ustawieniu destinationType na navigator.camera.PictureSourceType.SAVEDPHOTOALBUM lub navigator.camera.PictureSourceType.PHOTOLIBRARY obraz jest obrócony nieprawidłowo.

correctOrientationjest ustawiona na wartość true.

Używamy Cordova 2,8

Możemy dostać tylko dane obrazu po DesignationType jest FILE_URI za aparat i NATIVE_URI dla PHOTOLIBRARY. Czy ta różnica może mieć coś wspólnego z naszym problemem?

Kod jest:

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 
}); 

Wszelkie porady są mile widziane.

Answer 1

Orientacja obrazu jest przechowywana w danych EXIF. Here możesz znaleźć rozwiązanie swojego problemu.