Скрипт позволяет кадрировать картинку используя заранее определенные пропорции.

Скрипт написан с использованием jQuery.

В секцию head необходимо подключить jQuery, например, вот так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Дальше необходимо подключить jquery.cropbox.js и crop-box.css из папки public:

<script src="js/jquery.cropbox.js" type="text/javascript"></script>
<link href="css/crop-box.css" rel="stylesheet" type="text/css">

В качестве якоря для виджета используется любой html-элемент. Якорь должен содержать как минимум один обязательный data-атрибут (data-crop). Пример:

<div data-crop="img/navalny.png" data-size="100x100" data-size-preview="260x310" data-aspect="0.5" data-url="/upload"></div>

• data-crop — url картинки для кадрирования. Единственный обязательный параметр.
• data-size — размеры картинки, которая должна получиться после кадрирования
• data-size-preview — размеры превьюшечки
• data-type — тип получаемой картинки: png или jpg
• data-aspect — минимальный размер выбранной зоны
• data-param — название параметра, с которым прийдет файл
• data-url — серверный скрипт, который будет принимать картинку, закодированную в data-uri, ответ приходит в параметре с названием cropped_file

Если разобрать пример выше, мы будем кадрировать img/navalny.png, у нас получится картинка с размерами 100x100, минимальная часть, которую мы сможем выбрать на картинке будет равна 50% от 260x310, итоговую картинку получит скрипт, расположенный по адресу /upload.

Картинку, пришедшую на сервер нужно разобрать, она закодирована в data-uri. Получить картинку на ruby можно следующим образом:

file = Base64.decode64(params[:cropped_file].split(',')[1])

Доступны следующие события: complete, show и hide.

Привязать событие можно следующим образом:

$('#anchor').on('complete', function(e, file){
  console.info(file);
});

Вы можете быстро увидеть работу виджета в действии, для этого, у вас должен быть установлен интерпритатор Ruby.

Выкачиваем репозиторий:

git clone git@github.com:inferno/CropBox.git

Устанавливаем необходимые гемы:

cd CropBox
bundle install

Запускаем приложение:

ruby app.rb

В браузере заходим по адресу http://localhost:4567, смотрим на работу скрипта.

На скриншоте представлен внешний вид по умолчанию. Изменяя crop-box.css вы можете легко стилизовать виджет.

Скрипт поддерживает все браузеры, имеющие реализацию canvas.

• Firefox
• Opera
• Safari и Chrome
• Internet Explorer 9+

Copyright © Konstantin Savelyev