设置HTML5画布高度和宽度并具有内部缩放的内容

Question

是否可以设置画布元素的宽度和高度，并使现有的内容比例适合这些新尺寸？

现在用户上传图片，我的页面会创建一个包含此图片的画布元素，其尺寸与图片的尺寸相同。我想限制我正在使用的大小，所以这里是我想要发生的事情的一个例子：

1. 用户上传1600 x 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函数。如果使用比例尺，图像质量会更好。