转换后的PhoneGap图像旋转问题

Question

We're developing a PhoneGap app that amongst the core features being developed, it also features a user profile section. Within that screen/section we allow the user to update various details including their profile image. The profile image can either be taken with the camera (which works perfectly) or chosen from the users photo library. This is where our issue lies.

We're loading a photo from the users camera or camera roll using the navigator.camera.getPicture function.

We then create a new Image() and set the imageURI returned by phone gap as the image src . In the onload function of the image we draw the image into a canvas context to resize and crop it into a square.

We had a problem with the image, where when rendering the image was squashed but we've fixed that issue with the help of this post ( HTML5 Canvas drawImage ratio bug iOS )

The Problem: Everything works well when we get the image directly from the camera but when we set destinationType to navigator.camera.PictureSourceType.SAVEDPHOTOALBUM or navigator.camera.PictureSourceType.PHOTOLIBRARY the image comes out rotated incorrectly.

correctOrientation is set to true.

We're using Cordova 2.8

We can only get image data when the designationType is FILE_URI for CAMERA and NATIVE_URI for PHOTOLIBRARY . Could this difference have something to do with our problem?

The code is:

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

Any advice is much appreciated.

Answer 1

The image orientation is stored in EXIF data. Here you can find the solution to your problem.