6

開発中のコア機能の中で、ユーザー プロファイル セクションも備えた PhoneGap アプリを開発しています。その画面/セクション内で、ユーザーはプロフィール画像を含むさまざまな詳細を更新できます。プロフィール画像は、カメラで撮影するか（完全に機能します）、ユーザーの写真ライブラリから選択できます。ここに私たちの問題があります。

関数を使用して、ユーザーのカメラまたはカメラ ロールから写真を読み込んでいnavigator.camera.getPictureます。

次に、新しい を作成し、返された phone ギャップを image としてImage()設定します。画像の関数では、画像をキャンバス コンテキストに描画して、サイズを変更し、正方形にトリミングします。imageURIsrconload

レンダリング時に画像が押しつぶされるという問題がありましたが、この投稿 ( HTML5 Canvas drawImage ratio bug iOS )の助けを借りてその問題を修正しました。

問題:カメラから直接画像を取得する場合はすべて正常に機能しますが、 に設定destinationTypeした場合、navigator.camera.PictureSourceType.SAVEDPHOTOALBUMまたはnavigator.camera.PictureSourceType.PHOTOLIBRARY画像が正しく回転されない場合があります。

correctOrientation 真に設定されています。

Cordova 2.8を使用しています

FILE_URI指定タイプがCAMERA およびNATIVE_URIforの場合にのみ、画像データを取得できます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
});

どんなアドバイスでも大歓迎です。

4

1 に答える 1