在畫布上調整大小而不損失長寬比

大家好，感謝您提前提供任何幫助。我正在編寫一個phonegap應用程序，無法讓照片縮小而不會丟失方面或錯誤地裁剪圖像。在下面的函數中，「imageData」是相機拍攝的照片的64位字符串。我可以將圖像繪製到頁面上的畫布上，但如果圖片是在橫向拍攝的，那麼它會一起砸碎。如果我不通過使用比例函數或drawimage函數來縮放它，那麼我只得到照片的頂角。例如：我拍了一張照片，onPhotoDataSuccess函數中的圖像寬度顯示爲1296px寬，968px高。但我在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;  
}

來源

2011-07-19 user852566

縮放內置在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-19 18:59:26

你可以只畫這樣，沒有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-19 18:46:22 pimvdb

在畫布上調整大小而不損失長寬比

回答

相關問題