FC-CropResizer

Описание

Скрин из демонстрационной версии с кроп-резайзером Задача: создание готового решения для кропа-ресайза изображений на движке JavaScript/HTML/CSS в виде небольшого модуля для сайтов. Как задумка выглядит внешне см. на изображении справа.

Зачем может понадобиться такой скрипт:

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

Демонстрация работы

Работоспособность скрипта проверена в:

WIN: IE6, IE7, FF1.5, FF2, Mozilla 1.7.1, Safari 3, Opera 9+ WIN (с небольшим артефактом выделения);
NIX: FF2, Opera 9;
MacOS X 10.5.3: FF3.0RC2, Safari 3.1.1, Opera 9.27 (с небольшим артефактом выделения).

Быстрый старт

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

Кроме папки с фотками в распакованном архиве вы найдете:

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

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

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

cropresizer.getObject("photo1").init({

    cropWidth : 150,

    cropHeight : 150,

    onUpdate : function() {}

});

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

cropWidth — задает длину области кропа в пикселях.
cropHeight — высота области кропа.
onUpdate — единственный обязательный метод, будет более подробно рассмотрен в разделе API.

API

В разделе "быстрый старт" вы нашли краткое описание свойств и методов, используемых в примере. Здесь будет подробное описание API, дополняемое и расширяемое по мере апгрейда скрипта.

Свойства

Задают опции кроп-ресайза на стадии инициализации. Все свойства необязательны и имеют значения по-умолчанию.

cropWidth — ширина области кропа (в пикселях). По умолчанию — 100.
cropHeight — тоже самое для высоты.
saveProportions — параметр, указывающий на необходимость сохранения пропорции изображения (отношения width/height) при ресайзе. По умолчанию выставлен в true.
withContainer — свойство, разрешающее обёртку изображения в DIV фиксированного размера. Зачем это нужно? При изменении размеров изображения весь контент расположенный ниже также будет "ездить" по странице, что согласитесь не всегда приятно. Поэтому, при инциализации происходит обертка изображения в контейнер такого же размера, который сдерживает все остальные элементы на странице при ресайзе на своих местах. По умолчанию withContainer выставлен в true.
cropBackground — задает цвет фона для полупрозрачной области кропа, по умолчанию — белый.
showCropSize — опция для отображения размера кропа, по умолчанию — true.

Методы

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

onUpdate : function() {

    var div = document.getElementById("demId");

    if (div) {

        var info = "Длина изображения:" + this.iWidth;

        info += "<br\/>Высота изображения:" + this.iHeight;

        info += "<br\/>Длина кропа:" + this.cropWidth;

        info += "<br\/>Высота кропа:" + this.cropHeight;

        info += "<br\/>Y кропа:" + (this.cropTop - this.iTop);

        info += "<br\/>X кропа:" + (this.cropLeft - this.iLeft);

        div.innerHTML = info;

    }

}

Ссылки

Планы на будущее

Сделать возможность ресайза области кропа.
Проработать ресайз изображения в сторону увеличения.
Закрывать фотку (кроме области кропа) полуппрозрачным контейнером. Сейчас наоборот.

Релизы

Версия	Дистрибутив	Размер	Кол-во скачиваний	Создан
0.1.0	fc-cropresizer.zip	183 Кб	556	5 июня 2008