воскресенье, января 18, 2009

Как сохранить из Flash изображение II

Продолжаем совершенствование технологий, и подбираем новый метод сохранения изображений на сервер.
Последний раз мы это делали здесь: Как сохранить из Flash изображение в формате JPG. Посмотрим, насколько с той поры наука шагнула вперед.

Шуршим по гуглу и отвергаем посты, старше 2007-го года.

Итак, ссылок море, но все сводится к одному простому решению:
Using the AS3 Jpeg Encoder от Henry Jones.
Более коротко это описано здесь: Saving JPEGs with Flash,
довольно развернуто здесь: Save JPG JPEG PNG BMP Image Action Script 3.
Тут flash используется для конвертации и загрузки изображений на сервер: Using AS3 to Upload and Encode Images.
А вот здесь, даже разработали класс AS3 ImageSaver Class v1.0, который сохраняет изображения на сервер. Можно пользоваться.

Смысл прост - снимается BitmapData с интересующего нас клипа, кодируется в JPEG/PNG, что дает ButeArray, который затем и отправляется на сервер.

Но почему, все они используют Adobe AS3 Corelib классы, а в частности com.adobe.images.JPGEncoder? Ведь FlexSDK уже давно имеет mx.graphics.codec.JPEGEncoder и mx.graphics.codec.PNGEncoder. Попробуем разобраться.

Если с классами SDK всё понятно - все они в документации Flex SDK, то для исследования Corelib ознакомимся с документацией. Здесь множество других интересных классов, но в данный момент нас не интересующих. Возможно, какая-то часть этих классов была включена в SDK позже. Других объяснений я не нахожу.
Другое подозрение: в этой статье New Flash 10 Class: SavingBitmap так же используются эти классы, и автор делает упор, что нужен Flash Player 10. Но вот небольшой обзор Класс ImageSnapshot (Flex SDK 3), в котором никаких подобных требований не оглашается. В общем, разберемся в процессе разработки - благо, поменять кодеки можно в любой момент. (Позже выясняется, спасибо BlooDHounD - что б я без него делал :), что CoreLib пользуют, "из-за отсутвия в нём флекса").

Кстати, Еще одна статья "as3corelib Tutorial:How to Use JPEGEncoder and PNGEncoder Class in Flex" с демкой дает нам возможность сравнить кодирование при помощи кодеков Corelib и Adobe.

Хочется отметить, что процесс сохранения изображения заметно упростился и появилось много новых возможностей. И это радует.

Итак, берем за основу один из примеров, и пробуем.

* * *

Получить BitmapData и закодировать его нужным кодеком (от Flex SDK) - дело пяти минут. А вот сохранить изображение - это уже задача не простая.

Я начал с примера Using AS3 to Upload and Encode Images и на 4-м пункте, столкнулся с неким классом, именуемым UploadPostHelper. Ссылка вывела на еще один пост о сохранении из flash изображений на сервер: how to impress your friends by taking an image snapshot of a flash movie and automatically uploading the jpg to a server in three easy steps. Оказалось, что это очень полезный класс, который позволяет заключить в один запрос, помимо данных с изображением, набор передаваемых через POST переменных в виде пар Имя=Значение.

В моем случае, такой необходимости нет, всё что мне нужно, я буду передавать через GET. Но на будущее, запомним UploadPostHelper - это очень полезный инструмент. В целях упрощения, я беру код, относящийся к сохранению из Save JPG JPEG PNG BMP Image Action Script 3. Он довольно избыточен, но рабочий (скачал и проверил на своем хосте), и основные моменты можно вполне позаимствовать.

* * *

Код работает отлично, проблем не возникало, за исключением PHP, который при ошибке возвращает не пару "имя/значение" а простую строку, что вызывало ошибку. Но это было при отладке, так что когда я заменил эту строку на пару типа "status=Error", всё встало на свое место.

4 комментария:

sr-marmoset комментирует...

Я на основе этой фишки сделал Firefox Printing у Flash-а :)

http://flash-ripper.com/archives/002294.php

BlooDHounD комментирует...

1. во флексе они действительно не сразу появились.
2. выбор стоит в пользу корелиба, из-за отсутвия в нём флекса :)
3. под 10кой механизм работает гараздо лучше, так как не надо отправлять данные на сервак, что бы сохранить.

Racer комментирует...

2 sr-marmoset: спасибо за ссылку, не совсем, правда, понял, как может помочь Design View нашей задаче :).

2 BlooDHounD:
1. Я так и думал !
2. Теперь понятно. В моем случае, я пользую флекс, так что выбор адобовских классов вполне оправдан.
3. Обалдеть! И правда, не обратил внимания, что к инету нет обращения в момент сохранения! Это очень полезная фича! На сколько я понял, это осуществляется строчкой _fileRef.save(ba, defaultFileName); ?

BlooDHounD комментирует...

а я не смотрел, чем оно там реализовано :) на скорее всего да. я просто факты озвучал.