開発中のコア機能の中で、ユーザー プロファイル セクションも備えた PhoneGap アプリを開発しています。その画面/セクション内で、ユーザーはプロフィール画像を含むさまざまな詳細を更新できます。プロフィール画像は、カメラで撮影するか(完全に機能します)、ユーザーの写真ライブラリから選択できます。ここに私たちの問題があります。
関数を使用して、ユーザーのカメラまたはカメラ ロールから写真を読み込んでいnavigator.camera.getPicture
ます。
次に、新しい を作成し、返された phone ギャップを image としてImage()
設定します。画像の関数では、画像をキャンバス コンテキストに描画して、サイズを変更し、正方形にトリミングします。imageURI
src
onload
レンダリング時に画像が押しつぶされるという問題がありましたが、この投稿 ( HTML5 Canvas drawImage ratio bug iOS )の助けを借りてその問題を修正しました。
問題:カメラから直接画像を取得する場合はすべて正常に機能しますが、 に設定destinationType
した場合、navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
またはnavigator.camera.PictureSourceType.PHOTOLIBRARY
画像が正しく回転されない場合があります。
correctOrientation
真に設定されています。
Cordova 2.8を使用しています
FILE_URI
指定タイプがCAMERA およびNATIVE_URI
forの場合にのみ、画像データを取得できます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
});
どんなアドバイスでも大歓迎です。