Fine Uploader：在上传之前调整大文件的大小？

Question

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

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

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

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

如果可能（我知道某些浏览器可能不支持此功能），我希望能够调整图像客户端大小。

这可能吗？

Answer 1

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

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

本质上，在 Fine Uploader 原生支持图像处理之前，您将遵循处理此特定场景的步骤：

1. 提供您自己的文件输入元素或利用 Fine Uploader 的文件/文件夹拖放支持来处理用户选择的某些文件。
2. 使用FileReader 读取图片内容。
3. FileReader 将为您提供图片的 URL，将其分配给 img 元素的 src 属性。
4. 将img 绘制到canvas 元素上。这是调整大小的地方。
5. 从canvas 元素(canvas.toDataURL(...)) 中获取调整后图像的URL。
6. 将 URL 转换为 Blob。
7. 将Blob传递给Fine Uploader的addFiles API方法。

我们的目的是通过向 Fine Uploader 添加原生图像处理支持，为将来像您这样的集成商解决大部分问题。

希望这会有所帮助。