调整图像大小以适应画布

11 浏览
0 Comments

调整图像大小以适应画布

我有一个表单，允许用户上传图片。

一旦图片加载完成，我们会对其进行一些缩放，以减小文件大小，然后将其传回服务器。

为了实现这一点，我们将其放置在画布上，并在那里进行操作。

以下代码将在大小为320 x 240像素的画布上呈现缩放后的图片：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

... 其中canvas.width和canvas.height是基于原始图片尺寸的缩放因子。

但是当我使用以下代码时：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)

... 我只能在画布上看到图片的一部分，即左上角。我希望整个图片都能“缩放”以适应画布，尽管实际图片尺寸大于320x240的画布尺寸。

所以对于上面的代码，宽度和高度是1142x856，因为那是最终图片的尺寸。当提交表单时，我需要保持这个尺寸传回服务器，但是我只希望在画布上显示一个较小的视图供用户查看。

我在这里漏掉了什么？请问有人能指点我正确的方向吗？

0