Hello, world! Обрезка изображений прямо на сайте становится привычным делом и используется на многих проектах и сервисах. В большинстве случаев образка производится в автоматическом режиме по заранее заданным размерам и обычно этого вполне достаточно.
Но как быть, если каждый раз вам нужно вырезать изображения разных размеров, при этом важно выбирать область с наибольшей информативностью. Для таких целей существуют готовые скрипты и один из них - 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/Dark Masters - Black Sun.jpg" id="target" alt="" /> <br /> <button id="release">Убрать выделение</button> <button id="crop">Обрезать</button> <div class="optlist offset"> <label><input type="checkbox" id="ar_lock" />Соблюдать пропорции (4:3)</label><br /> <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().
На этом основная работа закончена, но для наглядности мы отправляем имя нового файла, что бы его можно было сразу отобразить на сайте. Здесь же при желании можно производить запись в базу данных либо производить еще какие-то действия над изображением.
Теперь обрезать изображения на сайте стало еще удобнее и проще. Кстати, чуть не забыл, давным давно уже был выложен подобный урок правда по тематике обрезка изображений на PHP, а не на JQuery, но тем не менее, возможно, тоже будет полезен для Вас! Удачи!