Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Jcrop – удобная обрезка изображений с выбором нужной области

Hello world. Обрезка изображений прямо на сайте становится привычным делом и используется на многих проектах и сервисах. В большинстве случаев образка производится в автоматическом режиме по заранее заданным размерам и обычно этого вполне достаточно. Но как быть, если каждый раз вам нужно вырезать изображения разных размеров, при этом важно выбирать область с наибольшей информативностью. Для таких целей существуют готовые скрипты и один из них - Jcrop (спасибо Олегу Пальгову за то, что предложил мне его изучить). Он позволяет прямо на изображении выделить нужную область, после чего обрезать его по полученным координатам не составит большого труда. Это очень удобно, т.к. визуально мы представляем, каким будет результат.

Jcrop

Изначально скрипт содержит довольно большое количество функций, которые не всегда бывают нужны. Поэтому я решил оставить, на мой взгляд, самые нужные, а так же для удобства дописал несколько строк кода. Для работы нам потребуется Jquery, основной скрипт jquery.Jcrop.min.js, crop.js – файл с настройками, и стили jquery.Jcrop.css.

<script  src="js/jquery.min.js"></script>
<script  src="js/jquery.Jcrop.min.js"></script>
<script  src="js/crop.js"></script>
<link  rel="stylesheet" href="css/jquery.Jcrop.css"  type="text/css" />
<style  type="text/css">
#crop{
	display:none;
}
#cropresult{
	border:2px solid #ddd;
}
.mini{
	margin:5px;
}
</style>

В crop.js мы и будем производить все манипуляции, связанные с выделением. Чуть позже я опишу его функционал. Теперь сам код страницы:

<img src="img/test.jpg" id="target" alt="[Jcrop Example]" />
<button id="release">Убрать выделение</button>
<button id="crop">Обрезать</button>
<div class="optlist offset">
	<label><input type="checkbox" id="ar_lock" />Соблюдать пропорции (4:3)</label>
	<label><input type="checkbox" id="size_lock" />min/max размер (80x80/350x350)</label>
</div>
<div  class="inline-labels">
   <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
   <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
   <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
   <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
   <label>W <input type="text" size="4" id="w" name="w" /></label>
   <label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
<p>Результаты:</p>
<div  id="cropresult"></div>

Как мы видим, у нас есть изображение, на котором будут производиться эксперименты. Идентификатор target сообщает скрипту, что именно с данным изображением следует работать. Далее идут кнопки для снятия выделения и непосредственно самой обрезки, и являются минимальным набором для функционирования Jcrop. Ниже идущий код является не обязательным и лишь демонстрирует некоторые возможности скрипта. Теперь если мы попытаемся выделить область на изображении, то скрип определит ее координаты, нужные для дальнейшей обрезки. После выделение у нас активируется кнопка «Обрезать», при нажатии на которую и будет происходить самое важное – обрезка изображения. При помощи дополнительных функций мы можем задавать соотношение сторон для выделяемой области, а так же ее максимальную/минимальную ширину и высоту. Произвести настройку этих параметров можно в файле crop.js, который мы сейчас рассмотрим:

// x1, y1, x2, y2 - Координаты для обрезки изображения
// crop - Папка для обрезанных изображений
var x1, y1, x2, y2, crop = 'crop/';
var  jcrop_api;
jQuery(function($){
	$('#target').Jcrop({ 
		onChange: showCoords,
		onSelect: showCoords
	},function(){ 
		jcrop_api = this; 
	});
	// Снять выделение 
	$('#release').click(function(e) { 
		release();
	}); 
	// Соблюдать пропорции 
	$('#ar_lock').change(function(e) {
		jcrop_api.setOptions(this.checked?
		{ aspectRatio: 4/3 }: {  aspectRatio: 0 });
		jcrop_api.focus();
	});
	// Установка  минимальной/максимальной ширины и высоты
	$('#size_lock').change(function(e) {
		jcrop_api.setOptions(this.checked?  {
		minSize:  [ 80, 80 ],
		maxSize:  [ 350, 350 ]
	}: {
		minSize:  [ 0, 0 ],
		maxSize:  [ 0, 0 ]
	});
		jcrop_api.focus();
	});
	// Изменение координат 
	function showCoords(c){
		x1 = c.x;  $('#x1').val(c.x); 
		y1 = c.y;  $('#y1').val(c.y); 
		x2 = c.x2;  $('#x2').val(c.x2); 
		y2 = c.y2;  $('#y2').val(c.y2); 
		$('#w').val(c.w);
		$('#h').val(c.h); 
   		if(c.w > 0  && c.h > 0){
			$('#crop').show();
		}else{
			$('#crop').hide();
		} 
	} 
});
function  release(){
   jcrop_api.release();
   $('#crop').hide();
}
// Обрезка изображение и вывод результата
jQuery(function($){
	$('#crop').click(function(e) {
		var img =  $('#target').attr('src');
		$.post('action.php',  {'x1': x1, 'x2': x2, 'y1': y1, 'y2': y2, 'img': img, 'crop': crop},  function(file) {
			$('#cropresult').append('<img  src="'+crop+file+'" class="mini">');
			release();
		}); 
	}); 
});

Итак, в самом начале мы объявляем ряд переменных:

x1, y1, x2, y2 - координаты для обрезки.

crop – путь для сохранения результатов.

Далее у нас идет инициализация скрипта для изображения с id target. После этого идет код, отвечающий за дополнительный функционал скрипта (снятие выделения, соблюдение пропорций, установка минимальной/максимальной ширины и высоты). Функция showCoords() заносит информацию о координатах в объявленные выше переменные, а так же выводит ее на экран. Теперь после выделения мы имеем необходимую информацию. Остается только передать ее php скрипту, который и выполнит обрезку.

При нажатии на кнопку «Обрезать», мы ajax запросом отправляем все данные в action.php (координаты выделенной области, исходное изображение и папку в которую будем сохранять результат). В этом файле мы подключаем функцию обрезки изображения, взятую с сайта recens.ru. Далее мы генерируем новое имя для изображения и обрабатываем пришедшие данные. Наконец кульминация события – обрезка и сохранение результата с помощью функции crop(). На этом основная работа закончена, но для наглядности мы отправляем имя нового файла, что бы его можно было сразу отобразить на сайте. Здесь же при желании можно производить запись в базу данных либо производить еще какие-то действия над изображением.

Теперь обрезать изображения на сайте стало еще удобнее и проще.

Автор: Евгений Бочкарев Урок добавлен: 18 Сентября 2013 в 20:40 Просмотров: 33867

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (21)

#22 AkudJEE 21-09-2014 в 11:30
Еще вопрос, как сделать так, чтобы при обрезке уменьшенного изображения обрезалось из оригинального размера.
То есть у меня есть изображение 1920x1280 px, если его вывести на страницу, то она получается огромной, поэтому при выводе я его уменьшаю до 50%. и при обрезке получается неправильная обрезка.
#23 kdes70 21-09-2014 в 13:46
делай сначала ресайз а потом кроп
#24 AkudJEE 21-09-2014 в 13:49
А как? Не могли бы объяснить
#25 ygor 28-10-2014 в 10:24
Отличная работа, только вот подскажите пожалуйста, как после сохранения исходного изображения с генерированым именем, удалять прежнее, функция unlink не хочет справляться, или может я её не там ставлю, подскажите пож. куда засунуть её??? СПС!
#26 Olg 29-11-2014 в 09:20
Добрый день. Подскажите пожалуйста, почему у меня на картинке не выделяется область, а вся картинка передвигается, если я пытаюсь выделить часть картинки мышкой? Спасибо.
#27 Руся 27-12-2014 в 11:06
есть кто?? помощь нужна
#28 Иван 10-07-2015 в 23:47
А что делать если вдруг индексный файл находится в другом каталоге, например в http://bitrix.ru/catalog/index.html. Все пути к файлам вроде прописал, а что-то не работает.
#29 Владимир 08-02-2016 в 08:11
А как сделать чтобы обрезная фотография имела тоже имя что и до обрезки
#30 Ден 24-03-2016 в 15:11
как сделать чтобы по умолчанию можно обрезать фиксированные размеры то есть кликнул на картинку а там уже рамка для обрезки 150 на 100. а насчёт ресайса могу подсказать exra@denabachin.url.ph
#31 Юрий 28-07-2016 в 10:08
Добрый день!

В данном примере не работает изменение размера выделенной области с помощью полей ввода (input-ы).
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки