Crop и Resize ваших изображений
5 июня 2008, 14:17
Автор: Александр Бурцев [bur]
Зачем?
Задача была сделать универсальный, по-возможности, скрипт, который мог бы заниматься ресайзом (изменением размеров) и кропом (обрезанием) любых изображений. Это иногда бывает нужно:- для "умного" вырезания превью из большого изображения,
- для подготовки аватара из любой загруженной фотки,
- ну и мало ли еще зачем нужен кроп и ресайз :-)
Смотрим как оно выглядит и работает.
Установка
Скачайте архив fc-cropresizer.zip (97Кб) и распакуйте в нужную директорию. Не пугайтесь большому размеру дистрибутива, там в папке demo-photo находятся изображения, которые можно смело удалять после просмотра демки.Кроме папки с фотками в распакованном архиве вы найдете:
- папку imgcropresize — включает пару мелких изображений непосредственно для кроп-ресайза;
- demo.html — та самая демка;
- fc-cropresizer.css — стили;
- fc-cropresizer.js — движок;
- LICENSE — лицензию BSD;
Подключайте в <HEAD> js- и css-файлы, кладите куда нужно папку с изображениеми и начинаем!
Использование
В любом удобном месте (head или body - не важно) пишем небольшой JavaScript-сценарий, для инициализации кропресайза:cropresizer.getObject("photo1").init({
cropWidth : 150,
cropHeight : 150,
onUpdate : function() {}
});
cropWidth : 150,
cropHeight : 150,
onUpdate : function() {}
});
cropresizer — это используемый namespace. Методу getObject передается в качестве параметра идентификатор (id) изображения, а метод init в качестве единственного аргумента принимает объект в JSON-формате, свойства которого настроят необходимым образом кроп-ресайз. Рассмотрим эти свойства:
- cropWidth — по-умолчанию равен 100, задает длину области кропа в пикселях.
- cropHeight — то же самое для высоты.
- onUpdate — единственное обязательное свойство (точнее метод). Принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта кроп-ресайза. В третьем примере демки все необходимые данные выводятся в завершающий страницу текстовый блок. Этот метод жизненно необходим для сохранения того, что вы наменяли, обычно в hidden-поля формы.
Размеры изображения можно изменять с сохранением пропорции width/height (по-умолчанию), так и без сохранения, для чего нужно выставить свойство saveProportions : false.
Остановимся более подробно на механизме работы скрипта, чтобы осветить некоторые полезные моменты:
- Скрипт получает элемент по идентификатору и заключает его в контейнер (DIV) фиксированных размеров. Таким образом, при уменьшении размеров изображения весь нижеидущий HTML-контент не едет, а остается на месте. Эту возможность можно отключить установив свойство this.withContainer : false.
- Как вы знаете, если зажать левую кнопку мыши и перемещать указатель, то сожержимое страницы будет выделяться, что не очень полезно при кропе/ресайзе. Чтобы забороть этот эффект вся страница накрывается прозрачной абсолютно-спозиционированной "пленкой" с z-index:100, которая препятствует выделению. Однако, эта пленка мешает кликать по ссылкам на странице, поэтому либо необходимо поднимать ссылки, либо отключить пленку опцией this.stopSelection : false. Также можно использовать привычные но невалидные onSelectStart="return false;" для IE и -moz-user-select:none для Gecko.
- Можно изменить фон области кропа (по-дефолту белый) или отключить показ размера кропа опциями cropBackground и showCropSize соот-но.
Кроссбраузерность
Работоспособность скрипта проверена в: - IE6, IE7 - WIN;- FF1.5, FF2 - WIN;
- Mozilla 1.7.1 - WIN;
- Safari 3 WIN;
- Opera 9+ WIN, однако, наблюдается выделение контента, не смотря на защитную "пленку";
- FF2 NIX;
- Opera NIX;
В старых (ниже девятой) версиях Оперы проблемы. Буду бороть.
Future
- Сделать возможность ресайза области кропа
- Проработать ресайз изображения в сторону увеличения
- То, что вы предложите :-)
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
