调整图像大小以在HTML5 Canvas中显示

Question

我正在尝试将图像显示在HTML5 Canvas上，同时保持纵横比并缩小图像（如果大于画布）。我环顾一些答案，但似乎错过了一些东西，并想知道你们是否可以提供帮助。

我正在使用其中一个Stackoverflow回答建议的函数“calculateAspectRatioFit”，但它似乎没有为我调整图像大小，就像它在答案中所做的那样 - 所以我可能做错了什么：）

这是我的代码：

  function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
    var rtnWidth = srcWidth*ratio;
    var rtnHeight = srcHeight*ratio;

    return { width: rtnWidth, height: rtnHeight };
  }

    var canvasImage = new Image();
    canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg";
    var ctx = this.getContext('2d');
    var parentWidth = self._widgetSize[0];
    var parentHeight = self._widgetSize[1];

    canvasImage.onload = function() {
      var imgSize = calculateAspectRatioFit(canvasImage.width, canvasImage.height, parentWidth, parentHeight);

      ctx.clearRect(0, 0, parentWidth, parentHeight);
      ctx.drawImage(canvasImage, 0, 0,imgSize.width, imgSize.height);
    };

显示图像但比HTML5 Canvas大。我所追求的是让图像与画布的宽度相同，如果高度大于画布的高度，那么它会溢出并隐藏......我只想填充宽度并保持纵横比。

任何人都可以帮助指出我缺少的东西吗？

感谢您的帮助：）

---更新30/11 --- 我刚刚添加了代码的答案，我得到以下内容:(这是第二个答案）

  var canvasImage = new Image();
  canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg";
  var ctx = this.getContext('2d');
  canvasImage.onload = scaleAndDraw(this, ctx, canvasImage);

  function scaleAndDraw(canvas, ctx, srcImage) {
  // Image is 2560x1600 - so we need to scale down to canvas size...
  // does this code actually 'scale' the image? Image of result suggests it doesn't.

    var aspect = getAspect(canvas, srcImage);
    var canvasWidth = (srcImage.width * aspect);
    var canvasHeight = (srcImage.height * aspect);
    ctx.drawImage(srcImage, 0, 0, canvasWidth|0, canvasHeight|0);
  }
  function getAspect(canvas, image) {
    return canvas.size[0] / image.width;
  }

因此显示图像的代码可以正常工作，但图像保持尺寸，并且没有调整到画布的尺寸。

希望图像能帮助您了解我遇到的问题。较大的图像似乎不会重新缩放以适应画布，同时保持纵横比。

有什么想法？ ：）

Answer 1

只要我提供合理的parentWidth，parentHeight值：

，您的代码就适用于我

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  var rtnWidth = srcWidth*ratio;
  var rtnHeight = srcHeight*ratio;
  return { width: rtnWidth, height: rtnHeight };
}

var parentWidth = 100; //self._widgetSize[0];
var parentHeight = 50; //self._widgetSize[1];
var canvasImage = new Image();
canvasImage.onload = function() {
  var imgSize = calculateAspectRatioFit(canvasImage.width, canvasImage.height, parentWidth, parentHeight);
  ctx.clearRect(0, 0, parentWidth, parentHeight);
  ctx.drawImage(canvasImage,30,30,imgSize.width, imgSize.height);
};
canvasImage.src = "http://www.greenwallpaper.org/backgrounds/simply-green-502085.jpeg";

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>