Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

К делу

Внешне задумка выглядит так:

Зачем?

Задача была сделать универсальный, по-возможности, скрипт, который мог бы заниматься ресайзом (изменением размеров) и кропом (обрезанием) любых изображений. Это иногда бывает нужно:
* для "умного" вырезания превью из большого изображения,
* для подготовки аватара из любой загруженной фотки,
* ну и мало ли еще зачем нужен кроп и ресайз :-)

Смотрим как оно выглядит и работает.

Установка

Скачайте архив fc-cropresizer.zip (97Кб) и распакуйте в нужную директорию. Не пугайтесь большого размера дистрибутива, там в папке demo-photo находятся изображения, которые можно смело удалять после просмотра демки.

Кроме папки с фотками в распакованном архиве вы найдете:
* папку imgcropresize — включает пару мелких изображений непосредственно для кроп-ресайза;
* demo.html — та самая демка;
* fc-cropresizer.css — стили;
* fc-cropresizer.js — движок;
* LICENSE — лицензию BSD;

Подключайте в js- и css-файлы, кладите куда нужно папку с изображениеми и начинаем!

Использование

В любом удобном месте (head или body - не важно) пишем небольшой JavaScript-сценарий, для инициализации кропресайза:

cropresizer.getObject("photo1").init({
cropWidth : 150,
cropHeight : 150,
onUpdate : function() {}
});

cropresizer — это используемый namespace. Методу getObject передается в качестве параметра идентификатор (id) изображения, а метод init в качестве единственного аргумента принимает объект в JSON-формате, свойства которого настроят необходимым образом кроп-ресайз. Рассмотрим эти свойства:

* cropWidth — по-умолчанию равен 100, задает длину области кропа в пикселях.
* cropHeight — то же самое для высоты.
* onUpdate — единственное обязательное свойство (точнее метод). Принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта кроп-ресайза. В третьем примере демки все необходимые данные выводятся в завершающий страницу текстовый блок. Этот метод жизненно необходим для сохранения того, что вы наменяли, обычно в hidden-поля формы.


Размеры изображения можно изменять с сохранением пропорции width/height (по-умолчанию), так и без сохранения, для чего нужно выставить свойство saveProportions : false.

Остановимся более подробно на механизме работы скрипта, чтобы осветить некоторые полезные моменты:
1) Скрипт получает элемент по идентификатору и заключает его в контейнер (DIV) фиксированных размеров. Таким образом, при уменьшении размеров изображения весь нижеидущий HTML-контент не едет, а остается на месте. Эту возможность можно отключить установив свойство this.withContainer : false.
2) Как вы знаете, если зажать левую кнопку мыши и перемещать указатель, то сожержимое страницы будет выделяться, что не очень полезно при кропе/ресайзе. Чтобы забороть этот эффект вся страница накрывается прозрачной абсолютно-спозиционированной "пленкой" с z-index:100, которая препятствует выделению. Однако, эта пленка мешает кликать по ссылкам на странице, поэтому либо необходимо поднимать ссылки, либо отключить пленку опцией this.stopSelection : false. Также можно использовать привычные но невалидные onSelectStart="return false;" для IE и -moz-user-select:none для Gecko.
3) Можно изменить фон области кропа (по-дефолту белый) или отключить показ размера кропа опциями cropBackground и showCropSize соот-но.

Совместимость

Работоспособность скрипта проверена в:
- IE6, IE7 - WIN;
- FF1.5, FF2 - WIN;
- Mozilla 1.7.1 - WIN;
- Safari 3 WIN;
- Opera 9+ WIN, однако, наблюдается выделение контента, не смотря на защитную "пленку";
- FF2 NIX;
- Opera NIX;
- FF3.0RC2 MacOS X 10.5.3
- Safari 3.1.1 MacOS X 10.5.3
- Opera 9.27 MacOS X 10.5.3, то же, что с выделением в WIN.

В старых (ниже девятой) версиях Оперы проблемы. Буду бороть.

О планах

* Сделать возможность ресайза области кропа
* Проработать ресайз изображения в сторону увеличения
* То, что вы предложите :-)

Кросспост Crop & Resize ваших изображений c http://webew.ru/.