轉換後的PhoneGap圖像旋轉問題

我們正在開發一個PhoneGap應用程序，它正在開發的核心功能中還包含一個用戶配置文件部分。在該屏幕/部分中，我們允許用戶更新各種詳細信息，包括他們的個人資料圖像。配置文件圖像可以使用相機拍攝（完美運行）或從用戶照片庫中選擇。這是我們的問題所在。轉換後的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。

我們使用科爾多瓦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 
});

任何意見是非常讚賞。

來源

2013-09-25 Chris Owens

你知道嗎？我正面臨同樣的問題，科爾多瓦2.9 –

圖像方向存儲在EXIF數據中。 Here你可以找到解決你的問題。

來源

2014-11-13 12:05:21

轉換後的PhoneGap圖像旋轉問題

回答

相關問題