画布drawImage，放大显示整个图像

Question

我有一个HTML Canvas元素，我正试图用图像填充它。它似乎只是放大了一小块，而不是整个图像。

我尝试获取画布和图像的大小，然后使用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验证了高度/宽度如下

background=768/768，canvas=960/678

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

我需要如何修改drawImage参数才能做到这一点？

提前感谢！

---

Obscure下面的回答在很大程度上帮助了我，我也有其他问题。画布元素被设置为高度/宽度100%，这导致了放大后的混乱，并且它位于大小可变的父元素中。

所以现在，在我画任何东西之前，我把画布设置为其父母的大小，然后Obscure的缩放效果很好

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

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);

Answer 1

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

让我们看看你的数字：

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

scaleX=960/768=1.25

比例尺Y=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");
function draw(e) {
let scale = Math.min(canvas.width / e.target.width, canvas.height / e.target.height);
let width = e.target.width * scale;
let height = e.target.height * scale;
let x = canvas.width / 2 - width / 2;
let y = canvas.height / 2 - height / 2;
context.drawImage(e.target, x, y, width, height)
}
var image = new Image();
image.onload = draw;
image.src = "https://picsum.photos/id/237/400/400"; // a 400 x 400 image

<canvas id="canvas" width=320 height=300 style="background-color: #dddddd;"></canvas>