转换后的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 被设置为true.

我们正在使用Cordova 2.8

当designationType是,我们只能得到图像数据,FILE_URI摄像头和NATIVE_URI为PHOTOLIBRARY.这种差异可能与我们的问题有关吗？

代码是:

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 数据中。在这里您可以找到问题的解决方案。