javascript - 调整 Canvas 大小并将调整后的内容复制到另一个 Canvas 中

Question

如何将已调整大小的 Canvas 的内容复制到另一个 Canvas 中？

如果我在 Canvas 内绘制一个图像然后调整它的大小，当我克隆内容时我会以其原始大小复制第一个 Canvas ，即使它已调整大小也是如此。

html:

<img id="image" src="the-image.png" width="275" height="95"/>
<canvas id="canvas-image" width="275" height="95"></canvas>
<canvas id="canvas-little" width="138" height="48"></canvas>

js:

var img = $('image');   

var cnvImage = $('canvas-image');
ctxImage = cnvImage.getContext('2d');
ctxImage.drawImage(img,0,0);

cnvImage.setStyles({ 'width': 138, 'height': 48 });

var cnvLittle= $('canvas-little');
ctxLittle = cnvLittle.getContext('2d');
ctxLittle.drawImage(cnvImage,0,0);

Answer 1

更改 Canvas 元素的大小不会更改底层图像光栅的大小。这与 img 标签非常相似，其中更改大小不会更改图像的实际内容。

如果你想绘制一个缩放版本的图像，你应该只使用 context2d.drawImage() 的五个参数版本:

context.drawImage(image, destinationX, destinationY, destinationHeight, destinationWidth);

Your example, updated

The canvas spec是一个绝佳的去处；这本书读起来很多，但就像吃蔬菜一样，对你有好处。