调整画布大小并将调整大小的内容复制到另一个内容中

Question

如何在另一个内容中复制调整大小的画布的内容？

如果我在画布中绘制图像然后调整大小，当我克隆内容时，我会以原始大小复制第一个画布，即使它已调整大小。

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

更改画布元素的大小不会更改基础图像栅格的大小。这与img标记完全相同，其中更改大小不会更改图像的实际内容。

如果要绘制图像的缩放版本，则应使用context2d.drawImage()的五参数版本：

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

Your example, updated

The canvas spec是一个绝佳的去处;这是很多东西，但是，就像吃蔬菜一样，它对你有好处。