Javascript Canvas如何放大图像

Question

我在 Canvas 上使用了scale()函数，但我不确定它是如何工作的，因为它似乎不像你想象的那样工作。我只是想将图像放大两倍。

const imageData = tempcanv.getContext('2d').getImageData(0, 0, tempcanv.width, tempcanv.height);
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext('2d');
canvas2.width = tempcanv.width * 2, canvas2.height = tempcanv.height * 2;
ctx2.scale(2, 2);
ctx2.putImageData(imageData, 0, 0);

这只是使图像位于更大的 Canvas 内，但图像大小本身并没有改变。这不是scale()应该做的事情还是我做错了什么？

Answer 1

使用 putImageData 它不会受到 Canvas 上当前转换的影响 - 在您的情况下，scale 将不会产生任何效果。

相反，您可以使用drawImage函数以所需的比例将临时 Canvas 绘制到其他 Canvas 上，例如:

...
// Syntax: ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx2.drawImage(tempcanv, 0, 0, tempcanv.width * 2, tempcanv.height * 2);
...

<小时/>

这是一个将一个 Canvas 绘制到另一个 Canvas 上的基本示例。

var canv1 = document.getElementById('canvas1');
var canv2 = document.getElementById('canvas2');
// Draw a rect on our source canvas as an example image
canv1.getContext('2d').fillRect(1, 1, 40, 40);
// Draw our first canvas onto our second at 2x
canv2.getContext('2d').drawImage(canv1, 0, 0, canv1.width * 2, canv1.height * 2);

<div>
  <canvas id="canvas1" width="100" height="100"></canvas>
</div>
<div>
  <canvas id="canvas2" width="200" height="200"></canvas>
</div>