客户端图像调整大小并保存


Client side image resize and save

有没有办法通过 Web 浏览器客户端调整图像大小并将其保存到临时文件?

我试图完成的是将图像大小调整为最大 1024px 宽/高,将其保存在本地,然后将调整后的图像上传到服务器。

原因是我正在构建一个在线应用程序,允许用户上传最多 6 张高分辨率图像,每张最大 4mb。然后在服务器上时,我将大小调整为 1024px 宽/高,实际上只有 200kb 左右。上传 4mb 只是为了调整为较小的文件大小有点浪费,所以我希望有一种方法可以调整大小,在上传之前保存临时文件客户端。

任何帮助表示赞赏。

你可以使用HTML5,我想...在这里四处走动 HTML5 画布(裁剪图像)

首先,您需要在上传图像之前获取上传图像 - 这可以通过输入[类型=文件]元素的HTML5文件属性来实现。

如果这样做了,您将需要修改图像数据以使用JS/HTML5进行重新排序 - 不知道它是如何工作的。

然后,您可以使用 XHR 上传修改后的图像。