Ресайз картинок на клиенте HTML5?

Question

[mishael]

В ИЕ5 собираются отключить Flash, говоря что все можно реализовать в HTML5. А можно ли сделать на HTML5 ресайз и поворот картинок на клиенте Перед загрузкой на сервак? Flash это может и я это использую.

Comments

[sainnr]

>> В ИЕ5 собираются отключить Flash
IE10 может быть?

[Masterkey]

ie5+html5=LOL

Answer 1

[Григорий Перетяка]

Как получить доступ к не загруженному изображению из javascript с помощью FileAPI есть много статей, в том числе и на Хабре

Насколько я знаю, FileAPI не позволяет обрабатывать изображение. Таким образом, вам придется самостоятельно создавать canvas, добавлять в него изображение, там обрабатывать, выгружать снова в текстовом виде и уже этот результат отправлять на сервер.

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

Материалы:
HTML5 File API
HTML5 CANVAS шаг за шагом: изображения

Answer 2

[korvindest]

Что ни будь подобное?

Answer 3

[mark_ablov]

Трудно, но можно.
FileAPI позволяет работать с сырыми данными.

Answer 4

[Maxmyd]

Любая картинка, прежде чем появиться в браузере, должна сначала появиться на сервере. HTML5 Canvas отлично работает с картинками, но и он тоже ничего не знает о том, какая картинка лежит у вас на компе. Ее надо загрузить. Тот же FileReader в FileAPI асинхронно грузит файл, а не читает его контент до загрузки.
Увы, клиентскому скрипту запрещен доступ к локальной файловой системе.

Comments

[Григорий Перетяка]

Доступа к файлу нет, а к изображению есть, к уже загруженному в переменную изображению.
Прув: habrahabr.ru/blogs/webdev/109079/

Answer 5

[Masterkey]

Даже если у вас будет доступ во всех броузерах к File API и таки перепишете для 3х типов изображений ресайз/поворот картинок на JS, то на больших изображениях он будет страшно тупить.
Согласно KISS лучше отправлять их на сервер и там изменять.

Кроме того даже если ие10 задекларировал отсутствие флеша, то это еще не значит, что клиенты так его послушаются, они скорее или установят флеш или уйдут на другой броузер.

Займите сейчас выжидательную позицию, а когда у вас появится ~3% пользователей с такой проблемой, тогда и приступайте к обсуждению, кто виноват и что делать

Comments

[Григорий Перетяка]

и таки перепишете для 3х типов изображений

Для каких 3-х типов?

то на больших изображениях он будет страшно тупить.

Прув?

Займите сейчас выжидательную позицию

Поддерживаю, проблема в теме весьма надуманная. Хотя, идеологически я за переход на HTML5 и за то, что бы оставлять флешь только там, где без него не обойтись.

Answer 6

[mishael]

Отправлять на сервер на пережатие — не вариант. Пришел человек с похода — у него 200 фоток по 5 мегабайт. отправлять в инет гиг — медленно даже при нынешних итернетах для очень многих людей. Поэтому надо пережать ДО отправки.

Answer 7

[Kane]

Да, возможно используя FileAPI + canvas. Взгляните на эту библиотеку www.pixastic.com/lib/