Плагин
JCrop предназначен для работы с изображениями. Он может производить разнообразные эффекты для изображений (в примере демонстрируется выделение объектов и масштабирование изображений). Но основное его назначение - обрезка изображений.
Шаг 1. HTML
Начнём с разметки HTML.
Вот наша основная страница с кодом для 3 примеров.
templates/jcrop_main.html
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/jcrop_main.js"></script>
<link rel="stylesheet" href="templates/css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.ui.accordion.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="templates/css/jcrop_main.css" type="text/css" />
<div class="jcrop_example">
<div id="accordion" class="accordion">
<h3><a href="#">Плагин Jcrop - обрезаем изображение на лету.</a></h3>
<div class="sample_1">
<div style="margin-bottom:10px;">
<h4>Панель предварительного просмотра:</h4>
<div style="overflow: hidden; width: 200px; height: 200px;">
<img id="preview" src="files/image.jpg"/>
</div>
</div>
<img src="files/image.jpg" id="cropbox1" />
<form action="index.php" method="post" onsubmit="return checkCoords();">
<div style="margin:5px;">
<label>X1 <input type="text" name="x" id="x" size="4"/></label>
<label>Y1 <input type="text" name="y" id="y" size="4"/></label>
<label>X2 <input type="text" name="x2" id="x2" size="4"/></label>
<label>Y2 <input type="text" name="y2" id="y2" size="4"/></label>
<label>Ш <input type="text" name="w" id="w" size="4"/></label>
<label>В <input type="text" name="h" id="h" size="4"/></label>
</div>
<div style="margin:5px;">
<input type="submit" value="Обрезать" />
</div>
</form>
<p>
<b>Пример использования скрипта для обрезки изображений.</b>
Выводится форма с индикацией значений (ее можно сделать невидимой).
Данный пример связывает несколько значений вместе с обработчиком события.
Значения в форме обновляются при изменении выделения.
Также есть область предварительного просмотра, в которой можно видеть результат обрезки изображения.
Выделенная часть изображения растягивается на стандартный размер миниатюры (200px x 200px)
без сохранения пропорциональности.
Если нажать на кнопку <i>Обрезать</i>, форма будет отправлена, и миниатюра размером 200px x 200px
будет передана в браузер. Попробуйте!
</p>
</div>
<h3><a href="#">Плагин Jcrop - анимация</a></h3>
<div class="sample_2">
<img src="files/image.jpg" id="cropbox2" />
<div style="margin: 20px 0;">
<button id="anim1">Позиция 1</button>
<button id="anim2">Позиция 2</button>
<button id="anim3">Позиция 3</button>
<button id="anim4">Позиция 4</button>
<button id="anim5">Позиция 5</button>
</div>
<p>
<b>Анимация выделения области.</b> Можно использовать API Jcrop для установки области выделения
с помощью анимации. Здесь представлены несколько кнопок для управления положением области выделения.
Но можно также выделять область вручную. Попробуйте!
</p>
</div>
<h3><a href="#">Плагин Jcrop - стилизация выделения</a></h3>
<div class="sample_3">
<img src="files/image.jpg" id="cropbox3" />
<p>
<b>Может быть, вам нравится голубой цвет.</b>
В данной демонстрации показано, как задавать стиль для нашего примера Jcrop. Все очень просто
- нужно использовать параметр addClass для изменения стилей. Также возможно устанавливать
прозрачность маскирующего слоя с помощью параметра bgOpacity (в текущем примере используется
bgOpacity = 0.5). Кроме того, в примере использован параметр minSize для определения минимального
размера области выделения (значение = 50).
</p>
</div>
</div>
</div>
Шаг 2. CSS
Вот какие стили CSS мы используем для нашего примера.
templates/css/jcrop_main.css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.jcrop_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:3.5em 10% 2em;padding:1em 2em 2em}
.jcrop_example p{font-size:90%}
.accordion h3{margin:0}
.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}
.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}
.jcrop_custom .jcrop-vline,.jcrop_custom .jcrop-hline{background:#FF0}
.jcrop_custom .jcrop-handle{background-color:#FF4B4B;-moz-border-radius:5px;-webkit-border-radius:5px;border-color:#FFF}
templates/css/jquery.Jcrop.css, templates/css/jquery.ui.accordion.css и templates/css/jquery.ui.theme.css
Данные файлы являются стилями для элементов jQuery. Нет необходимости приводить полностью их код в нашем уроке. Они всегда доступны для скачивания.
Шаг 3. JavaScript
Вот необходимый код JavaScript для нашего урока.
js/jcrop_main.js
$(function(){
// Для примера 1
$('#cropbox1').Jcrop({ // Привязываем плагин JСrop к изображению с id=cropbox1
aspectRatio: 0,
onChange: updateCoords,
onSelect: updateCoords
});
// Для примера 2
var api = $.Jcrop('#cropbox2',{ // Привязываем плагин JСrop к изображению с id=cropbox2
setSelect: [ 100, 100, 200, 200 ]
});
var i, ac;
// Обработчик, который прерывает действие
function nothing(e) {
e.stopPropagation();
e.preventDefault();
return false;
};
// Обработчик события для запуска анимации
function anim_handler(ac) {
return function(e) {
api.animateTo(ac);
return nothing(e);
};
};
// Устанавливаем координаты областей для анимации
var ac = {
anim1: [0,0,40,600],
anim2: [115,100,210,215],
anim3: [80,10,760,585],
anim4: [105,215,665,575],
anim5: [495,150,570,235]
};
// Привязываем соответствующий обработчик события
for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));
// Для примера 3
$('#cropbox3').Jcrop({ // Привязываем плагин JСrop к изображению с id=cropbox3
setSelect: [ 20, 130, 480, 230 ],
addClass: 'jcrop_custom',
bgColor: 'blue',
bgOpacity: .5,
sideHandles: false,
minSize: [ 50, 50 ]
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
var rx = 200 / c.w; // 200 - размер окна предварительного просмотра
var ry = 200 / c.h;
$('#preview').css({
width: Math.round(rx * 800) + 'px',
height: Math.round(ry * 600) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
};
jQuery(window).load(function(){
$("#accordion").accordion({autoHeight: false,navigation: true});
});
function checkCoords() {
if (parseInt($('#w').val())) return true;
alert('Пожалуйста, выберите область для обрезки.');
return false;
};
js/jquery.Jcrop.min.js, js/jquery.min.js, js/jquery.ui.accordion.js и js/jquery.ui.widget.js
Это общие файлы – библиотека jQuery с дополнениями. Нет необходимости приводить код из данных файлов в нашем уроке. Они всегда доступны для скачивания.
Шаг 4. PHP
Теперь настал черед использовать PHP:
index.php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = $targ_h = 200;
$jpeg_quality = 90;
$src = 'files/image.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
require_once('templates/jcrop_main.html');
require_once('templates/footer.html');
?>
Шаг 5. Изображение
Также нам нужно изображение для нашего примера.
Заключение
Сегодня вы узнали про плагин JCrop. Попробуйте его в действии, измените настройки. Наверняка он окажется полезным в каком-либо проекте!