Неплохое решение для crop\resiz'а изображений на javascript!
Задача была сделать универсальный, по-возможности, скрипт, который мог бы заниматься ресайзом (изменением размеров) и кропом (обрезанием) любых изображений. Это иногда бывает нужно:
* для "умного" вырезания превью из большого изображения,
* для подготовки аватара из любой загруженной фотки,
* ну и мало ли еще зачем нужен кроп и ресайз :-)
Демонстрация работыРаботоспособность скрипта проверена в:
* 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: [attachment=1]
Источник: _http://fastcoder.org/projects/?id=2#releases
На хабре: _http://habrahabr.ru/blogs/javascript/26888/
Вы смотрите: Блог разработчика » JavaScript » FC-CropResizer 
