Будем считать, что вы расположили все файлы как в заметке, а теперь мы ее немного расширим. Вот весь javascript на стринице, придется заменить тот, который остался после последней заметки.
/**
* обновляем координаты прямоугольника, миниатюры создающего
*/
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
/**
* чтобы не отправлять нулевые координаты
*/
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
$(function() {
$('form').submit(function(){
$('#files').val($('#response').html());
});
// загрузить файлы
$('#upload').click(function(){
$('#uploadify').uploadifyUpload();
return false;
});
// асинхронная загрузка
$('#uploadify').uploadify({
'uploader': 'uploadify.swf',
'script': 'uploadify.php',
'folder': 'upload',
'cancelImg': 'cancel.png',
'checkscript' : 'check.php',
'fileDesc' : 'jpg;png;bmp;gif',
/*'queueID' : 'fileQueue',*/ // id где будет появляться список
'multi' : false,
'fileExt' : '*.jpg;*.png;*.gif,;*.jpeg',
'onComplete' : function(event,queueID,fileObj,response,data) {
$('#response').slideDown('slow');
//$('#response').append(response);
$('#response').append('<div><span class="ui-icon ui-icon-closethick"></span><b>' + response+ '</b></div>');
/*-----------------------------уличная магия будет здесь ;)-----------------------------*/
$.ajax({
'url' : 'ajaxhandler.php',
'type': 'post',
'data': {
'path': response,
'action': 'parsepath'
},
'success': function(data){
//alert(data);
$('#cropcontainer').html('<iframe id="pic" height="600" width="100%" />');
// $('#path').val('ff');
$('#pic').attr('src', 'iframe.php' + '?filename=upload/' + data);
}
})
/*-------------------------------------конец уличной магии =)------------------------------*/
}
});
});
Алгоритм прост до безумия: после асинхронно загрузки файла на сервер (мы будем загружать по одному файлу), обрабатывается событие onComplete uploadify, которое загружает специально подготовленный iframe, проделывающий всю грязную работу.
Вот собственно он сам.
<?php
/**
* этой штукой мы отображаем картинку с возможностью ресайзинга
*/
$filename = $_GET['filename'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jcrop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
$(function(){
$('form').submit(function(){
$.ajax({
'url' : 'cut.php',
'type': 'post',
'data': {
x: $('#x').val(),
y: $('#y').val(),
w: $('#w').val(),
h: $('#h').val(),
f: $('#f').val() // filename
},
'success': function(data){
$("#thumbs",top.document).append('<img src="' + data + '" />');
$('#pic', top.document).slideUp('slow');
}
})
return false;
})
$('#cropbox').Jcrop({
// FIXME: пропорции в отдельный конфиг
aspectRatio: 4/3,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Выделите область для миниатюры');
return false;
};
</script>
</head>
<body>
<img src="<?php echo $filename; ?>" id="cropbox" />
<form action="cut.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="f" name="f" value="<?php echo $filename; ?>"/>
<input type="submit" value="Закончить двигать квадратик" />
</form>
</body>
</html>
И файл cut.php, ему помогающий. Здесь следует отметить то, что поддерживаются только файлы jpeg, но не реализовано никакой защиты, дабы не загромождать пример.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// FIXME: вынести настройки в отдельный файл
$targW = 400;
$targH = round(3 / 4 * $targW); // 3/4 пропорции для миниатюры
$jpegQuality = 100;
$src = $_POST['f'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targW, $targH);
imagecopyresampled($dst_r, $img_r, 0, 0, $_POST['x'], $_POST['y'],
$targW, $targH, $_POST['w'], $_POST['h']);
// FIXME: никогда так не делать
$filename = dirname(__FILE__) . '/thumbs/' . basename($_POST['f']);
imagejpeg($dst_r, $filename, $jpegQuality);
echo 'thumbs/' . basename($filename);
// exit;
}
?>
Еще нам понадобится небольшой обработчик AJAX запросов, потому что я сразу не придумал как реализовать это в javascript, поэтому сделал это на PHP, если кто подскажет как буду премного благодарен =)
ajaxhandler.php
<?php
$action = $_POST['action'];
switch ($action) {
case 'parsepath':
echo basename(str_replace('<br />', '', $_POST['path']));
break;
default:
break;
}
?>
Плагины для jQuery:
jCrop
uploadify
Что стоит подправить?
Сделать проверку на загружаемые файлы
Реализовать очистку мусора, коего скапливается не очень мало
Удачного вам программирования.