Виджет для обработки фото. Позволяет просмотреть то, как будет выглядеть фотографии в разных разрешениях и пропорциях. Можно зумить и перемещать фото.
Требует подключение excanvas!
var croper = $('.js-croper').Croper(); // Инициализируем плагин
croper.setZoom(0.5); // Уменьшаем картинку на половинуПример разметки:
<div class="js-croper" data-size="630x270"> <!--Обертка для Cropper, в ней указываются размеры видимой области--->
<!--Панель с зумом (не обязательна)--->
<ul class="js-croper-zoomer">
<li class="js-croper-zoomer-in">+</li>
<li class="js-croper-zoomer-out">–</li>
</ul>
<!--Картинка, которую необходимо обрезать--->
<img src="http://cdn.voboyah.com/img/33590-1920x1200.jpg" alt="" class="js-croper-image">
<!--Список доступных размеров в данной пропорции. Не обязателен-->
<ul class="js-croper-sizes">
<li class="js-croper-size active" data-size="630x270">
<span>630x270</span>
</li>
</ul>
</div>Опции Cropper и их значения по умолчанию:
{
CSS_CLASS: 'js-croper', // Префикс для класса. Можно изменить для более удобной работы с версткой
zoomStep: {in: 1.1, out: 0.9 }, // Параментры зума. in - на сколько увеличивем, out - на сколько уменьшаем
animate: true, // Анимация при изменении размеров картинки, {Boolian} или {Function} в функцию передаются $crope - область в кторой лежит канвас, $canvas
maxWidthSizeMenu: 170, // Максимальная ширина меню с размерами фото. Когда Cropper станет меньше этого размера, меню скроется
}Метода Cropper:
Croper.getParams(); // Получает объект с состоянием картинки (координаты, зум, размеры видимой области и картинки)
Croper.getImage(); // Возвращиет jQuery объект картинки
Croper.setSize(); // Устанавливает размеры видимой области Cropper-а
Croper.setCoords(); // Устанавливает координаты
Croper.setZoom(); // Устанавливает зум
Croper.hideGUI(); // Скрывает интерфейс (зум + размеры картинки)
Croper.showGUI(); // Показывает интерфейс
Croper.toggleGUI(); // Если Cropper больше maxWidthSizeMenu, то интерфейс показывается и наоборот
Croper.restore(); // Возвращает холст к изначальному состоянию (координаты: 0,0, зум: 1)
Croper.destroy(); // Уничтажает объект, удаляет обработчики событий и заменяет <canvas> картинкойТак же можно передавать некоторые значения через data-* атрибуты:
data-zoom="1.5" - Начальный зум картинки
data-x="100" data-y="150" - Начальные координаты картинки
Поддерживаются браузеры IE8++, Google Chrome, FF
TODO:
- Починить контекстное меню
- Рефакторинг кода
- Покрыть тестами
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent