Попросил меня человек с ПыхаФорума помочь с библиотекой для визуального выделения объекта на картинке с последующем обрезом этого объекта, то есть «Crop» как говорится! :-)
Фронтенд часть я реализовал при помощи jQuery плагина — и соответственно не без помощи библиотеки . Что заняло у меня минут 10-15, так как я с этим плагином уже работал и успешно применял на проекте
Бекенд часть решил сделать на , хотя сначала хотел на , однако в силу того, что библиотека imagick на хостингах часто не установлена — решил не рисковать.
Как это выглядит
http://demo.adw0rd.ru/imgcrop/
Итак, перейдем к реализации
Качаем и подключаем , а также jQuery.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ImgCrop</title>
<link rel="stylesheet" href="./styles/screen.css" type="text/css" media="screen" />
<script type="text/javascript" src="./scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="./scripts/jquery.imgareaselect-0.6.1.js"></script>
<script type="text/javascript" src="./scripts/imgareaselect.js"></script>
</head>
<body>
<div id="page">
<div id="workspace">
<img style="float: left; margin-right: 10px;" src="ladybug_ant.jpg" id="image"/>
</div>
<br style="clear:both" />
<div id="result"><img src="./images/ajax-loader.gif" alt="ajax" /></div>
</div>
</body>
</html>
Теперь посмотрим на реализацию фронтенд части:
{
// загрузка...
$('#result')
.html('<img src="./images/ajax-loader.gif" alt="ajax" />')
.css({display: "block"});
// отправляем данные бэкенду
$.post(
'./backend/index.php',
{
w: selection.width,
h: selection.height,
x: selection.x1,
y: selection.y1,
i: $('#workspace > img').attr('src')
},
function(txt){
$('#result').html(txt);
},
'text'
);
}
// Сначала инициализируем плагин imgAreaSelect и передаем параметры
$(window).load(function () {
$('#image').imgAreaSelect({
movable: true,
resizable: true,
onSelectEnd: imgCrop // после выделения объекта срабатывает ф-ия imgCrop()
});
});
Реализацию бэкенда не стал выкладывать, так как в этой статье это не так важно, кому надо, тот посмотрит в каталог /backend/ и найдет то что ищет... ;)
P.S. не забудьте указать права на запись файлу tmp.jpeg :)
-----------------------------------
Для простой версии:
Демка http://demo.adw0rd.ru/imgcrop/
Сырцы http://demo.adw0rd.ru/imgcrop.zip
-----------------------------------
Для расширенной версии:
Демка http://demo.adw0rd.ru/imgcropext/
Сырцы http://demo.adw0rd.ru/imgcropext.zip
Кстати, данный плагин использует сервис Gravatar.com ;-)
Кто кого использует?
Ссорь, Граватар использует — плагин :-)
[...] php GD imagemagick crop [...]
[...] imgareaselect [...]
[...] imgAreaSelect [...]
[...] imgareaselect Оставить комментарий | Comment RSS | Теги: FreeBSD, FTP Назад: FreeBSD. Восстановление root’ового пароля Далее: MySQL. Количество вхождений подстроки в строку [...]
[...] jquery image crop PHP ImageMagick [...]
еще бы при удерживаемом шифте — делать квадратное выделение
и при нажатом пробеле можно было перемещать выделение...
:)
epsyl, хитрец!) напиши :)
а как можно сделать область выделения заданого размера? вот нужно, чтоб при выборе горизонтальной фотки она обрезалась до вертикальной 250×350
тут посмотрите, особенно: maxHeight, maxWidth, minHeight, minWidth, resizable, aspectRatio.
Сообщение с опозданием — несмотря на 1.5 годичное отсутствие сообщений:
Работает прекрасно, — особенно с большими изображениями.
Но при этом и появляется проблема-изображение не масштабируется
и «закрывает» весь экран.
Можно ли масштабировать исходное изображение — именно масштабировать (Не ресайзинг).
Скрипт иллюстративный. Было бы не плохо иметь возможность загружать изображение, давать ему имя при загрузке на сервер,
а кроп-изображение сохранять с именем «имя первоначально+кроп».расширение файла.
Спасибо, познавательно.