Pixlr -- редактируем фото онлайн

Каждый, кто делал сайт с возможностью загрузки фото или хотя бы аватаров, наверное, задумывался о том, что хорошо бы сделать возможность пользователю отмасштабировать или обрезать фото прямо онлайн. Недавно я нашел весьма интересное решение: онлайн-редактор Pixlr, сделанный на Flash. По возможностям он мало уступает ранним версиям Photoshop (есть все те же основные инструменты, поддержка слоев, фильтров, которые были в Photoshop 7). Кроме того, имеется и более простая версия Pixlr Express, которая позволяет применить набор эффектов (изменение размера, обрезка, коррекция красных глаз, изменение баланса белого и т.п.) к изображению. Открывать в редакторе можно изображения как с URL, так и со своего компьютера в форматах JPG, TIFF, PSD, PNG и других.

Самый простой способ подключить редактор к своему сайту — открывать его в IFRAME. Но в этом случае пользователю придется сохранять отредактированный файл на свой компьютер, а потом грузить его на сайт. Неудобно. Поэтому лучше использовать Pixlr API для открытия и сохранения файлов прямо на сайт. API очень прост в освоении:

сначала подгружаем библиотеку http://developer.pixlr.com/_script/pixlr.js:

<script type="text/javascript" src="/_script/pixlr.js"></script>

Далее задаем настройки. Это можно сделать одним из двух способов. Первый — заранее через pixlr.settings.

<script type="text/javascript">

pixlr.settings.target = // URL, на который будет отправлена картинка при сохранении;

pixlr.settings.exit = // URL, куда перейдет пользователь, если выйдет без сохранения картинки;

pixlr.settings.credentials = true;

pixlr.settings.method = // способ передачи картинки. Может быть get и post. В случае get картинка сохраняется на сервере Pixlr, и передается ее URL, если post, то картинка передается непосредственно на сайт, указанный в target в поле image

pixlr.settings.image = //URL картинки, которую требуется отредактировать (при передаче GET-запросом) или сама картинка (при POST-запросе)

pixlr.settings.title = // название картинки

pixlr.settings.referrer = // название сайта, для которого производится редактирование картинки

</script>

Второй — непосредственно при вызове редактора, который делается так:

<a href="#" onclick="pixlr.overlay.show({image:'URL картинки', title:'Заголовок ' /*, другие параметры */}); reutrn false"><img src='' /></a>

Для того, чтобы вызывать Pixlr Express, нужно задать параметр service: 'express'. При вызове URL, указанного в target, будут переданы следующие параметры:
title — название картинки, которое пользователь может задать в редакторе;
image — ссылка на URL отредактированной картинки (при get-запросе) или сам файл с картинкой (при post-запросе);
type — формат, в котором сохранена картинка.

Если отправка на сайт осуществляется методом POST, то нужно создать в его корне файл crossdomain.xml, в котором разрешить прием данных от pixlr.com. Файл должен быть такого вида:

<?xml version="1.0"?>

<cross-domain-policy>

<allow-access-from domain="*.pixlr.com" />

</cross-domain-policy>