画布绘制图像缩放

Question

我正在尝试将图像按比例缩放到画布。我可以用固定的宽度和高度来缩放它：

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

但我只想调整宽度并按比例调整高度。像下面这样的东西：

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

我已经看过我能想到的所有地方，但还没有看到这是否可能。

原文由 selanac82 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Gaurav 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@TechMaze 的解决方案很好。

这是经过一些更正和引入 image.onload 事件后的代码。 image.onload 是必不可少的，以避免任何类型的失真。

 function draw_canvas_image() {

  var canvas = document.getElementById("image-holder-canvas");
  var context = canvas.getContext("2d");
  var imageObj = document.getElementById("myImageToDisplayOnCanvas");

  imageObj.onload = function() {
    var imgWidth = imageObj.naturalWidth;
    var screenWidth  = canvas.width;
    var scaleX = 1;
    if (imgWidth > screenWidth)
        scaleX = screenWidth/imgWidth;
    var imgHeight = imageObj.naturalHeight;
    var screenHeight = canvas.height;
    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;

    context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
  }
}

原文由 Mashhood 发布，翻译遵循 CC BY-SA 4.0 许可协议