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

Question

我试图让图像显示在 HTML5 Canvas 上，同时保持宽高比并缩小图像(如果大于 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。我想要的是让图像与 Canvas 的宽度相同，如果高度大于 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;
  }

因此，用于显示图像的代码有效，但图像保持其尺寸，并且没有调整大小到 Canvas 的尺寸。

希望该图片能帮助您了解我遇到的问题。较大的图像似乎无法在保持宽高比的同时重新缩放以适合 Canvas 。

有什么想法吗？ :)

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>