Html5 canvas 画布drawImage，向外缩放以显示整个图像

我有一个HTML画布元素，我正试图用图像填充它。它似乎只是显示一个非常小的缩放片段，而不是整个图像

我尝试获取画布和图像的大小，然后使用drawImage的可选参数，如下所示

  const canvas = canvases.first.nativeElement; // the nativeElement
  const ctx = canvas.getContext('2d');

  var background = new Image();
  background.src = irImageUrl;

  background.onload = (x) => {
    ctx.drawImage(background,0,0,background.width,background.height,0,0,canvas.offsetWidth,canvas.offsetHeight);

我已经通过console.log验证了高度/宽度如下

背景=768/768，画布=960/678

我试图使图像（768x768）填满一个完整的轴，并自动设置另一个轴，以便保持纵横比，您可以看到整个图像

我需要如何修改drawImage参数才能执行此操作

提前谢谢

---

莫名其妙的回答在很大程度上帮助了我，我还有其他问题。canvas元素被设置为height/width 100%，这导致放大混乱，并且它位于大小可变的父元素中

所以现在在我画任何东西之前，我将画布设置为它的父级大小，然后模糊的缩放效果非常好

我的新代码和工作代码如下所示

    const leftPane = this.leftPane.last.nativeElement;
    canvas.width = leftPane.offsetWidth;
    canvas.height = leftPane.offsetHeight;

    let scale = Math.min(canvas.width / background.width, canvas.height / background.height);
    let width = background.width * scale;
    let height = background.height * scale;
    let x = canvas.width / 2 - width / 2;
    let y = canvas.height / 2 - height / 2;          
    ctx.drawImage(background, x, y, width, height);

---

为此，您需要计算一个比例，该比例可以将图像的宽度和高度相乘，而不会在任何方向超过画布的尺寸。这个比例可以通过将画布宽度除以图像的宽度，将画布高度除以图像的高度，并最终选择两个数字中的较小者来计算

让我们看看你的数字：

画布宽度：960 |画布高度：678 |图像宽度：768 |图像 身高：768

scaleX=960/768=1.25

scaleY=678/768=0.8828125

较小的数值为0.8828125，因此成为我们的最终刻度

宽度=图像宽度*0.8828125=768*0.8828125=678

高度=图像高度*0.8828125=768*0.8828125=678

现在我们知道了678 x 678的目标尺寸，正如您所看到的，它使图像的纵横比保持在1:1

通过这些数字，我们还可以计算出我们需要在画布中绘制图像以使其居中的确切位置

x=画布宽度/2-678/2=960/2-678/2=141

y=画布高度/2-678/2=678/2-678/2=0

下面是一个例子：

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
功能图（e）{
让scale=Math.min（canvas.width/e.target.width，canvas.height/e.target.height）；
让宽度=e.target.width*比例；
让高度=e.目标高度*刻度；
设x=canvas.width/2—width/2；
设y=canvas.height/2—height/2；
上下文.drawImage（例如目标、x、y、宽度、高度）
}
var image=新图像（）；
image.onload=绘图；
image.src=”https://picsum.photos/id/237/400/400"; // 400 x 400图像