转换后PhoneGap图像旋转问题

Question

我们正在开发一款 PhoneGap 应用，在开发的核心功能中，它还具有用户个人资料部分。在该屏幕/部分中，我们允许用户更新各种详细信息，包括他们的个人资料图像。个人资料图像可以使用相机拍摄（效果很好），也可以从用户照片库中选择。这就是我们的问题所在。

我们正在使用navigator.camera.getPicture 函数从用户相机或相机胶卷中加载照片。

然后我们创建一个新的Image()，并将电话间隙返回的imageURI设置为图像src。在图像的onload 函数中，我们将图像绘制到画布上下文中以调整大小并将其裁剪为正方形。

我们遇到了图像问题，在渲染图像时被压扁，但我们在这篇文章 (HTML5 Canvas drawImage ratio bug iOS) 的帮助下解决了这个问题

问题：当我们直接从相机获取图像时一切正常，但是当我们将destinationType 设置为navigator.camera.PictureSourceType.SAVEDPHOTOALBUM 或navigator.camera.PictureSourceType.PHOTOLIBRARY 时，图像旋转不正确。

correctOrientation 设置为真。

我们使用的是 Cordova 2.8

只有在 CAMERA 的 designationType 为 FILE_URI 和 PHOTOLIBRARY 的 NATIVE_URI 时，我们才能获取图像数据。这种差异是否与我们的问题有关？

代码是：

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

非常感谢任何建议。

Answer 1

图像方向存储在 EXIF 数据中。 Here你可以找到解决你问题的方法。