Реализация редактора изображений на стороне клиента - как лучше?

Question

Нам нужно веб-приложение, которое позволяет пользователю редактировать изображения в браузере, и мы пытаемся решить, какую технологию использовать.Мы хотим поддерживать простую настройку изображения, такую ​​как высококачественное изменение размера, обрезка, объединение изображений и преобразование цветов, а также добавление текстовых элементов с различными шрифтами и цветами.

Текущие параметры:

1. Flash: не нужно беспокоиться о совместимости между браузерами;может использовать одну и ту же библиотеку изображений на клиенте и сервере;нет поддержки iPhone / iPad.
2. Java (скомпилирован в javascript с GWT): нужно найти хорошую библиотеку изображений на чистом Java, чтобы ее можно было скомпилировать в JS.
3. Простой старый javascript + HTML5: может быть беспорядок из-за нескольких браузеров;может потребоваться написать код редактирования изображения с нуля.

Вот что для нас наиболее важно / критерии выбора:

• Согласованность изображения: изображение, которое клиент редактирует набраузер должен быть точно таким же, как тот, который мы в конечном итоге будем использовать в бэкэнде.Мы можем достичь этого, (а) имея одну и ту же библиотеку на клиенте и на сервере для обработки изображений, (б) попросив клиента сгенерировать изображение и загрузить его на сервер, или (в) использовать две разные библиотеки обработки изображений наклиент / сервер и надежда на лучшее с точки зрения согласованности.Вариант (а) кажется лучшим, но он будет возможен только в том случае, если мы используем Flash или Java / GWT.Нам не нравится вариант (б), потому что изображения большие;мы бы предпочли сохранить последовательность операций для необработанного изображения, чем сохранять несколько преобразованных изображений.И мы на самом деле не знаем, безопасен ли вариант (c).
• Масштабируемость: мы предпочитаем, чтобы клиент выполнял как можно больше работы, чтобы уменьшить нагрузку на сервер.
• Качество изображения должноподдерживать высокий уровень
• Кроссплатформенность: мы хотели бы поддерживать как можно больше платформ, не переписывая все (большой минус для Flash из-за iPhone / iPad).

Какой путьвы рекомендуете?Есть ли альтернатива, которую мы упускаем?

Спасибо за любую помощь!

Answer 1

Определенно Flash.Если вы работаете с JavaScript и HTML5, вы в основном говорите «пошалите» всем пользователям IE.Механизм рендеринга Flash быстрее для этих вещей, чем браузер, и скорость будет одинаковой для всех браузеров.Кроме того, Flash имеет очень мощные встроенные библиотеки для работы с изображениями, тогда как в JavaScript вам придется писать их самостоятельно.

Редактировать: Поскольку я только что получил отрицательное голосование по 3-летний ответ, я обязан сказать, что это больше не так, и вы должны использовать веб-стандарты, такие как <canvas>, потому что они довольно распространены в наши дни.Не используйте Flash.

Answer 2

Мы пошли с 3, потому что Java-апплеты в значительной степени мертвы, и нам не нравится Flash.Надеюсь, HTML5 - это будущее.
GWT звучит как интересный вариант, но мы не могли его использовать, потому что серверная часть - это .NET.Написание кода для редактирования изображений это весело:)

Answer 3

Это сообщение было создано 4 года назад, и теперь сценарий совсем другой, поэтому я хотел бы дополнить ответы более свежей информацией.

• Flash больше не является хорошим выбором, поскольку некоторые браузеры блокируют его, а другие поощряют его не использовать по многим причинам. Flash не подходит для мобильных устройств.
• Java-апплет имеет больше ограничений, чем Flash.В настоящее время он используется только тогда, когда у нас нет другого выбора.
• Silverlight представляет аналогичные проблемы Flash.
• Экосистема Javascript развивалась, и теперь у нас есть много инфраструктур для ее использования на стороне клиента, на стороне сервера и на мобильных устройствах.Принятие и поддержка Javascript теперь более зрелая.Поэтому теперь я считаю Javascript лучшим выбором.

Для разработчиков, ищущих обработку изображений на стороне клиента, я рекомендую следующий базовый пример: Обработка изображения перед загрузкой на сервер

Вы можете использовать эту же платформу для разработки мобильных приложений: Начало работы с обработкой изображений на мобильных устройствах с использованием Javascript, Ionic и MarvinJ

Ниже приведен справочный материал по фреймворкам javascript для управления изображениями:

• fabric.js
• processing.js
• CamanJS
• imgix-js
• MarvinJ

ПРИМЕЧАНИЕ: Я приглашаю всех отредактировать этот ответ и дополнить список выше.

Answer 4

Я бы выбрал JS + HTML5 \ canvas.Если вы только начинаете писать это приложение и не зависите от технологии, это лучший выбор.Браузеры быстро улучшаются в отличие от плагина Flash или Java (у 40-60% настольных ПК есть?).Единственный жуткий монстр, который держит революцию - это IE, но я думаю, что IE9 перенесет нас в новую эру, где мы можем создавать действительно классные кросс-браузерные приложения в Интернете, используя новые стандарты :) Так что вы можете начать сейчасСпустя 3 месяца IE9 выйдет с поддержкой Canvas и всеми этими модными штуками.Все остальные браузеры готовы прямо сейчас, но они будут развиваться и улучшать скорость двигателя JS.Я надеюсь:)