file-upload - 精细上传者 : resizing large files before upload?

Question

我正在评估 Fine Uploader与其他各种选项相比，特别是 JQuery File Upload .

与依赖 Bootstrap 和 JQuery UI 的 JQuery File Uploader 相比，我通常更喜欢 Fine Uploader 方法，因为它更轻量级。

然而，能够调整图像大小很重要:例如，用户可能会从他们的相机中选择一个大文件，这可能非常大 - 上传全分辨率照片可能需要很长时间 . JQuery 文件上传就是这样做的。

此外，我们对非常高分辨率的文件没有太大用处。

如果可能(我知道有些浏览器可能不支持)，我希望能够调整图像客户端的大小。

这可能吗？

Answer 1

Fine Uploader 目前没有任何对图像处理的 native 支持。这是我们积压工作中的一项功能，但没有多少用户告诉我们他们对此感兴趣。这是此类功能尚未在本地实现的原因之一。有案例，#707这标志着对 Fine Uploader 的原生图像编辑支持的开始。暂定为 4.0。

但是，您当然可以使用 FileReader和 Canvas调整图像大小。然后，您可以将此调整大小的图像作为 Blob 提交。通过 addFiles 到 Fine Uploader API 方法。此时，文件已提交，Fine Uploader 已准备好上传项目。

本质上，在 Fine Uploader 本身支持图像处理之前，您将遵循以下步骤来处理此特定场景:

提供您自己的文件输入元素或利用 Fine Uploader 的文件/文件夹拖放支持来处理用户选择的某些文件。

使用 FileReader读取图像的内容。

FileReader将为您提供图像的 URL，将其分配给 src img 的属性元素。

绘制 img到 canvas元素。这就是调整大小的地方。

从 canvas 中获取调整大小的图像的 URL元素 ( canvas.toDataURL(...) )。

将 URL 转换为 Blob .

通过Blob到 addFiles Fine Uploader的API方法。

其目的是通过向 Fine Uploader 添加 native 图像处理支持，在 future 为像您这样的集成商处理大部分(如果不是全部)这些。

希望这可以帮助。