アスペクト比を失うことなくキャンバス上で写真のサイズを変更

Question

こんにちは、すべての助けを受けていただきありがとうございます。私はphonegapアプリを書いており、アスペクトを失うことなく、または誤って画像を切り取ることなく、写真を縮小することはできません。以下の関数では、 "imageData"はカメラが撮影した写真の64ビット文字列です。私は自分のページのキャンバスに画像を描くことができますが、風景の中で撮影された画像は一緒に壊されます。スケール関数や描画関数を使ってスケールしないと、写真の上隅だけが得られます。例：写真を撮ったとき、onPhotoDataSuccess関数の画像の幅は幅が1296ピクセル、高さが968ピクセルであることを示しています。しかし、iPhoneのキャンバスは272px（ポートレートモード）です。私はウェブ上でさまざまなスケーリング方法を試してきましたが、これはまったくもっとも近いものではありません。何が間違っているのですか？

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;  
} 

Answer 1

スケーリングは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/

ここ

は、あなたが始めるためにいくつかの作業コードです

Answer 2

あなただけ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; 
}