在画布上调整照片大小而不失去纵横比

Question

大家好，提前感谢任何帮助。我正在编写一个phonegap应用程序，但是无法在不失去纵横比或错误裁剪图像的情况下缩小照片。在下面的函数中，“imageData”是相机拍摄的照片的64位字符串。我可以将图像绘制到我的页面上的画布上，但如果图片是横向拍摄的，则会被压缩在一起。如果我不使用比例函数或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;      
}

- user852566

Answer 1

缩放功能已内置在drawImage中。

处理canvas时不要使用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);

Live example:

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

- Simon Sarris

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

- pimvdb