Canvas drawImage缩放

Question

我正在尝试按比例缩放图片到画布。我可以用固定的宽度和高度来缩放它，如下所示：

context.drawImage(imageObj, 0, 0, 100, 100)

但我只想调整宽度并按比例调整高度。如下所示：

context.drawImage(imageObj, 0, 0, 100, auto)

我看到了我能想到的所有地方，并没有看到这是否可能。

Answer 1

context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

Answer 2

@TechMaze的解决方案非常好。

这是在image.onload事件的一些正确性和介绍之后的代码。 image.onload 对于避免任何失真非常重要。

registerUser(..)

Answer 3

如果您想根据屏幕尺寸正确缩放图片，可以使用以下数学方法： 如果您没有使用JQUERY，请使用适当的等效选项替换$（window）.width。

var imgWidth = imageObj.naturalWidth;
var screenWidth  = $(window).width() - 20; 
var scaleX = 1;
if (imageWdith > screenWdith)
    scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = $(window).height() - canvas.offsetTop-10;
var scaleY = 1;
if (imgHeight > screenHeight)
    scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
    scale = scaleX;
if(scale < 1){
    imgHeight = imgHeight*scale;
    imgWidth = imgWidth*scale;          
}
canvas.height = imgHeight;
canvas.width = imgWidth;
ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);