Как сохранить несколько изображений, как одно.

[ByKraB]

Здравствуйте.

Не уверен, что пишу в нужную тему. Делаю это не специально, а по незнанию )

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

Собственно сабж - как реализовать сохранение результата в виде изображения? И какие инструменты для этого использовать? Предполагаю, что с помощью js это сделать не представляется возможным.

Спасибо.

[Great Rash]

Что есть "кейс"? Чемодан?

Загруженную картинку можно отобразить, используя Canvas API. При помощи него же можно сохранить результат. Только со старыми ИЕ будут проблемы.

[Vin]

  On 5/28/2013 at 4:27 AM, ByKraB said:

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

Скорее всего, без операций на сервере сделать это будет нельзя.

  On 5/28/2013 at 6:59 AM, Great Rash said:

Что есть "кейс"? Чемодан?

Это типа чехлов, только из твёрдых материалов, чаще всего.

[ByKraB]

  On 5/28/2013 at 6:59 AM, Great Rash said:

Что есть "кейс"? Чемодан?

Загруженную картинку можно отобразить, используя Canvas API. При помощи него же можно сохранить результат. Только со старыми ИЕ будут проблемы.

К сожалению, пока не много опыта работы с Canvas. Подскажите пожалуйста, в какую сторону копать.

  On 5/28/2013 at 8:27 AM, Vin said:

Скорее всего, без операций на сервере сделать это будет нельзя.

Обработка на сервере тоже приемлима. Какой язык для этого подойдет?

[nerv]

крокодил -> чумадан

https://developer.mo...ние изображений

Edited May 28, 2013 by nerv

[Great Rash]

  On 5/28/2013 at 3:07 PM, ByKraB said:

Подскажите пожалуйста, в какую сторону копать.

Ну для начала надо прочитать API. Выше nerv дал ссылку на отличную вводную статью, только не надо начинать с середины, а лучше пройти сюда. Потом надо прочитать про то как сохранить изображение, которое выводится канвасом, это дело легко гуглится по запросу "canvas save to file". Ну собственно и всё.

Для сохранения и обработки картинок, которые будет загружать пользователь юзайте PHP. Т.е. грузим картинку на сервер и аяксом показываем её на канвасе.

[nerv]

  On 5/29/2013 at 7:20 AM, Great Rash said:

Для сохранения и обработки картинок, которые будет загружать пользователь юзайте PHP. Т.е. грузим картинку на сервер и аяксом показываем её на канвасе.

в случае, когда требуется "разовая обработка", без сохранения исходных изображений или состояния, можно сделать все на клиенте:

- прочитать файл

- микс в канвас

- канвас в изображение

[Great Rash]

А как прочитать файл с компа юзера? Особенно в ИЕ? Кстати, какие требования по кроссбраузерности?

[nerv]

  On 5/29/2013 at 8:25 AM, Great Rash said:

А как прочитать файл с компа юзера?

http://www.html5rocks.com/ru/tutorials/file/dndfiles/

  On 5/29/2013 at 8:25 AM, Great Rash said:

Кстати, какие требования по кроссбраузерности?

http://caniuse.com/filereader

http://caniuse.com/canvas

[Great Rash]

Ну я про FileReader погуглил уже. Кроме него никаких способов и нет. Вопрос про кроссбраузерность адресовался топикстартеру, т.к. этот FileReader только с ИЕ 10 работает.

[ByKraB]

  On 5/29/2013 at 11:19 AM, Great Rash said:

Ну я про FileReader погуглил уже. Кроме него никаких способов и нет. Вопрос про кроссбраузерность адресовался топикстартеру, т.к. этот FileReader только с ИЕ 10 работает.

По кроссбраузерности, все человеческие браузеры + IE 8 включительно.

С загрузкой картинки не вижу проблемы. Обычная форма и input type="file". Работу с локальными файлами оставим более серьезным проектам ))

P.S Большое всем спасибо за помощь, советы и ссылки. Пойду копать все это богатство.

Edited May 29, 2013 by ByKraB