Точный загрузчик: изменение размера файлов перед загрузкой?

Question

Я оцениваю Fine Uploader по сравнению с различными другими опциями, в частности JQuery File Upload.

Обычно я предпочитаю подход Fine Uploader, поскольку он более легкий, по сравнению с JQuery File Uploader, который имеет зависимости от Bootstrap и JQuery UI.

Однако важно иметь возможность изменять размер изображений: например, пользователь может выбрать большой файл с камеры, и это может быть очень большим - загрузка изображения с полным разрешением может занять очень много времени. Загрузите файл JQuery.

Кроме того, у нас мало пользы для файлов с очень высоким разрешением.

Если возможно (я знаю, что некоторые браузеры могут не поддерживать это), я хотел бы иметь возможность изменять размер клиентского размера изображений.

Возможно ли это?

Answer 1

У Fine Uploader в настоящее время нет встроенной поддержки манипуляции с изображениями. Это особенность нашего отставания, но у нас не было много пользователей, которые говорят нам, что они заинтересованы в этом. Это одна из причин, почему такая функция еще не реализована изначально. Существует случай, #707, который знаменует начало собственной поддержки редактирования изображений для Fine Uploader. Это ориентировочно запланировано на 4.0.

Однако, вы можете использовать FileReader и Canvas, чтобы изменить размер изображения. Затем вы можете отправить это измененное изображение как Blob в Fine Uploader с помощью метода API addFiles. В этот момент файл был отправлен, и Fine Uploader готов загрузить этот элемент.

По сути, шаги, которые вы бы следовать, чтобы справиться с этим конкретным сценарием, прежде, чем Fine Uploader изначально поддерживает манипуляцию с изображениями:

1. Обеспечьте свой собственный входной файл элемент (ы) или использовать файл перетащить Fine добавившего его/папки и отказаться от поддержки, чтобы получить дескриптор некоторых файлов, выбранных пользователем.
2. Используйте FileReader чтобы прочитать содержание изображения.
3. FileReader предоставит вам URL-адрес изображения, присвойте его атрибуту src элемента img.
4. Нарисуйте img на элемент canvas. Здесь происходит изменение размера.
5. Возьмите URL-адрес измененного изображения из элемента canvas (canvas.toDataURL(...)).
6. Конвертировать URL-адрес в Blob.
7. Передайте Blob методу API addFiles API.

Цель состоит в том, чтобы позаботиться о большинстве, если не все это, для интеграторов, таких как вы в будущем, добавив поддержку обработки изображений для Fine Fineer.

Надеюсь, это поможет.