調整畫布大小並在另一個內部複製調整大小的內容

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是去的好地方;閱讀很多東西，但是像吃你的蔬菜一樣，這對你很好。