設置HTML5畫布高度和寬度並且具有縮放內容

Question

是否可以設置畫布元素的寬度和高度，並使現有內容縮放以適應這些新維度？

現在用戶上傳圖像，我的頁面創建一個包含此圖像的畫布元素，其尺寸與圖像大小相同。我想限制我與然而工作，大小，所以這裏是什麼，我想有一個例子發生：

1. 用戶上傳的圖像是1600×1200個像素（不保存到服務器）
2. 數據右移到html5畫布對象
3. 畫布高度和寬度設置爲800 x 600，並且圖像內容適當縮放然後顯示。

現在，如果我設置畫布的寬度和高度，它只是裁剪那些尺寸的圖像，而不是按照我的意願調整尺寸。謝謝！

Answer 1

有很多方法來調用drawImage

之一是：

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

其中DX，DY，DW，DH是目標的x，y，寬度和高度。

如果您將dw和dh始終設置爲800x600，則繪製的圖像將始終自動縮放至800x600。

這裏有一個小例子，將永遠得出任何尺寸的圖像爲800x600 http://jsfiddle.net/jAT8Y/

Answer 2

另一種方法是使用context.scale功能。如果你使用比例尺，你的圖像質量會更好。