轉換后的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

當FILE_URI為CAMERA的NATIVE_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數據中。 在這里，您可以找到問題的解決方案。