Fine Uploader：在上傳之前調整大文件的大小？

Question

我正在評估Fine Uploader與各種其他選項的比較，具體爲JQuery File Upload。

與JQuery File Uploader相比，我更喜歡Fine Uploader方法，因爲它比較輕巧，它依賴於Bootstrap和JQuery UI。

但是它能夠將圖像尺寸調整是很重要的：例如，用戶可以選擇從他們的相機大文件，並且這可能是非常大的 - 上傳全分辨率照片可能需要很長的時間。 JQuery文件上傳做到這一點。

此外，我們沒有太多的高分辨率文件的用途。

如果可能（我知道一些瀏覽器可能不支持這一點），我希望能夠調整圖像客戶端大小。

這可能嗎？

Answer 1

Fine Uploader目前不支持圖像處理。這是我們積壓的功能，但我們還沒有很多用戶告訴我們他們對此感興趣。這是爲什麼這種功能尚未實現的原因之一。有一種情況，#707標誌着Fine Uploader的本機圖像編輯支持的開始。它是暫定預定爲4.0。

但是，您當然可以使用FileReader和Canvas來調整圖像的大小。然後，您可以通過addFiles API方法將此調整大小的圖像作爲Blob提交給Fine Uploader。此時，該文件已被提交，Fine Uploader已準備好上傳該項目。

從本質上講，這些步驟你就跟着來處理這種特定情況下，前細上傳原生支持圖像處理：

1. 提供自己的文件輸入元素（S）或利用精細上傳的文件/文件夾拖並放棄支持以獲取用戶選擇的某些文件的句柄。
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添加本機圖像處理支持來爲未來的集成商（如您自己）處理大部分（如果不是全部）。

希望這會有所幫助。