6

こんにちは、事前に助けてくれてありがとう。私はphonegapアプリを書いていますが、アスペクトを失ったり、誤って画像をトリミングしたりせずに写真を縮小することはできません. 以下の関数の「imageData」は、カメラが撮影した写真の 64 ビット文字列です。私のページのキャンバスに画像を描くことはできますが、写真が横向きに撮られた場合、それは一緒に砕かれます. scale 関数または drawimage 関数を使用して拡大縮小しない場合、写真の上隅のみが取得されます。例: onPhotoDataSuccess 関数で画像の幅が 1296 ピクセル、高さが 968 ピクセルであることを示す写真を撮りました。しかし、iPhone 上の私のキャンバスは幅 272 ピクセル (ポートレート モード) です。私はウェブ上でさまざまなスケーリング方法を試しましたが、これが最も近いようです。私は何を間違っていますか？

 function onPhotoDataSuccess(imageData) 
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d"); 
myImage.onload = function() 
  { 
    thecanvas.setAttribute('width', '100%');
    thecanvas.setAttribute('height', 'auto');
    ctx.scale((myImage.width * 0.15), (myImage.height * 0.15));  
    ctx.drawImage(myImage, 0, 0);   
    }     

    myImage.src = "data:image/jpeg;base64," + imageData;      
}
4

2 に答える 2

8

スケーリングは drawImage に組み込まれています。

キャンバスを扱うときは setAttribute を使用せず、canvas.width = 272代わりに呼び出し、ピクセル値全体のみを使用してください。

作業を開始するための実用的なコードを次に示します。

 function onPhotoDataSuccess(imageData)
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d");

    myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);
    }     

    myImage.src = "http://placekitten.com/1296/968";
}


onPhotoDataSuccess(null);

実際の例:

http://jsfiddle.net/QBTrg/6/

于 2011-07-19T18:59:26.293 に答える
1

scale関数なしで、次のように描画できます。

ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);

ただし、解像度はパーセンテージではなく、明示的に設定する必要があります。例えば：

window.onload = function() {
    thecanvas.width = window.width;
    thecanvas.height = window.height;
}
于 2011-07-19T18:46:22.793 に答える