Comments 122
Спасибо, давно хотел поискать подобную штуку, но всё время не было времени, а она тут как тут) Сегодня протестирую.
Спасибо за полезную статью! Плюс в карму, а пост - в закладки.
Отлично, как раз собирался писать нечто подобное для своего проекта :)
Искал недавно, большое спасибо
Ммммм. Здорово.
Спасибо большое, интересно.
PS. Где-то недавно видел в качестве плагина для jQuery :)
PS. Где-то недавно видел в качестве плагина для jQuery :)
если найдешь - дай ссылку в личку
http://remysharp.com/2007/03/19/a-few-mo…
Банально в Google: jquery image crop
Банально в Google: jquery image crop
Блин, ступил.
Вот ссылка: http://odyniec.net/projects/imgareaselec…
Вот ссылка: http://odyniec.net/projects/imgareaselec…
Помомему логичней было бы ресайзить сам прямоугольник, который можно таскать.
UFO just landed and posted this here
Не совсем верно, необходима и возможность фиксированного кропа, и его ресайз - на выбор. Второе вскоре будет реализовано.
У меня мозг ломается таскать в двух разных местах.
Посмотрите - http://lunatic.dev.jetstyle.ru/imagetool…
Примерно тоже самое. Но в вашем примере можно искажать картинку, меняя только высоту или ширину.
Это я давным давно когда-то писал. Получить превью можно даблкликом по выделению.
Посмотрите - http://lunatic.dev.jetstyle.ru/imagetool…
Примерно тоже самое. Но в вашем примере можно искажать картинку, меняя только высоту или ширину.
Это я давным давно когда-то писал. Получить превью можно даблкликом по выделению.
Дело в том, что кроп и ресайз - это 2 разные задачи, разве вы не ощущали этого работая в фотошопе? Подумайте, какой скрипт лучше справится с задачей вырезания аватарок, Ваш или мой? :-)
так и представляю... гружу фотку 4000х3000 пикселей и начинаю мотать полосы прокрутки в поисках контрола для ресайза...
Как 8 точек избавять вас от этой проблемы?
Вам тоже придется скроллить и тянуть несколько точек.
Ну а если делать зум фотки, то можно его делать и в моем скрипте под размер страницы.
Вам тоже придется скроллить и тянуть несколько точек.
Ну а если делать зум фотки, то можно его делать и в моем скрипте под размер страницы.
мне нужно вырезать кусок изображения. не в пикселях. пиксели - это там, за монитором. я вижу изображение, размером в некоторое количество угловых координат. мне нужно вырезать, например, лицо. я хватаюсь за рамку изображения (не за угол какого-то квадратика!) и тяну её, отрезая тем самым лишнее. и мне совершенно наплевать, выделю я зону величиной 50 пикселей на 100-пиксельном изображении или 100 пикселей на 200-пиксельном. я выделил то, что меня интересует. пиксели уж рассчитайте как-нибудь сами.
кстати, я категорически против "8 точек". особенно таких кривых реализаций с их пропаданием при перемещении, как тут в комментах предложили... пунктирной рамки более чем достаточно.
По сути не важно какого размера будет прямоугольник в браузере, задача на клиенте определить, какая часть изображения будет использоваться в качестве превью. Клиенту известны пропорции, а какого рамера будет превью - это может решать сервер.
И одно пожелание: при ресайзе изображения (раз пошли по такому пути) неплохо было бы поцизионировать прямоугольник, чтобы смотрел в одну и ту же точку на изображении.
И одно пожелание: при ресайзе изображения (раз пошли по такому пути) неплохо было бы поцизионировать прямоугольник, чтобы смотрел в одну и ту же точку на изображении.
Слишком сложно. Клиент должен думать о пропорциях, сервер что ресайзить.
Должно работать ПО_ЧЕЛОВЕЧЕСКИ, а именно - что вырезал, то и получил.
Должно работать ПО_ЧЕЛОВЕЧЕСКИ, а именно - что вырезал, то и получил.
UFO just landed and posted this here
UFO just landed and posted this here
Спасибо! Очень нужная штука! Спасибо!
Заодно проверил в браузерах на MacOS X 10.5.3:
FF3.0RC2 - ok
Safari 3.1.1 - ok
Opera 9.27 - ok (и то же самое выделение, что и на Win)
Заодно проверил в браузерах на MacOS X 10.5.3:
FF3.0RC2 - ok
Safari 3.1.1 - ok
Opera 9.27 - ok (и то же самое выделение, что и на Win)
а как оно отдает параметры обратно? т.е. поресайзил-поресайзил потом на сервер отправил и сохранил, как?
Читайте статью:
+ третий пример в демке
onUpdate — единственное обязательное свойство (точнее метод). Принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта кроп-ресайза. В третьем примере демки все необходимые данные выводятся в завершающий страницу текстовый блок. Этот метод жизненно необходим для сохранения того, что вы наменяли, обычно в hidden-поля формы.
+ третий пример в демке
здорово, но не густо с настройками. Мне кажется на FLASH решить эту проблему можно более универсально!
zoom в Лисе портит всю картину, уезжает прямоугольник кропа относительно самой фотографии
FireFox 3RC1 - Linux
Сначала вроде работало нормально потом стало "заедать". То объект тащится как картинка то по отпусканию кнопки продолжает ездить за кусором. А так штука очень полезная, спасибо вам.
Сначала вроде работало нормально потом стало "заедать". То объект тащится как картинка то по отпусканию кнопки продолжает ездить за кусором. А так штука очень полезная, спасибо вам.
В FF3RC2 наблюдается следующий баг (или фича):
В любом из трех примеров начинаю перемещать выделение. Все ОК. Теперь отпускаю левую кнопку мыши. Пробую еще раз, и не идет! Курсор принимает вид "перемещение невозможно".
Если попробовать перемещать в других примерах - там все ок. Возвращаемся к первому - опять все ок. Такое ощущение, что у Вас есть какая-то глобальная переменная, которая сбрасывается при переходе от одной картинки к другой.
Трабла наблюдается на всех изображениях. Иногда (раза два получилось), баг не наблюдается: можно дважды поперемещать выделение внутри одной картинки.
В IE6 все отлично, как Вы и написали.
В любом из трех примеров начинаю перемещать выделение. Все ОК. Теперь отпускаю левую кнопку мыши. Пробую еще раз, и не идет! Курсор принимает вид "перемещение невозможно".
Если попробовать перемещать в других примерах - там все ок. Возвращаемся к первому - опять все ок. Такое ощущение, что у Вас есть какая-то глобальная переменная, которая сбрасывается при переходе от одной картинки к другой.
Трабла наблюдается на всех изображениях. Иногда (раза два получилось), баг не наблюдается: можно дважды поперемещать выделение внутри одной картинки.
В IE6 все отлично, как Вы и написали.
Вроде бы есть это, чем не подходит?
http://developer.yahoo.com/yui/imagecropper/
http://developer.yahoo.com/yui/imagecropper/
Спасибо за ссылку, не знал.
А принцип работы там немного другой, так что скрипты совсем не идентичны.
А принцип работы там немного другой, так что скрипты совсем не идентичны.
Тогда это:
http://developer.yahoo.com/yui/resize/
Я просто к тому что не стоит изобретать велосипед, только зря время потратишь...
http://developer.yahoo.com/yui/resize/
Я просто к тому что не стоит изобретать велосипед, только зря время потратишь...
Велосипед изобретать безусловно не стоит. А вот создавать легкие и быстрые приложению, точечно бьющие по конкретной задаче, имхо, правильно, особенно если писать их на чистом js. Недостаток всех js-фреймфорков - неповоротливость и слишком большое число настроек.
>...не стоит изобретать велосипед, только зря время потратишь...
Интересная точка зрения. А все велосипеды в мире изобретены/созданы одним производителем?
Человек ведь пишет для себя, для своих проектов. Сюда выкладывает, чтобы народ потестировал и т.п. А Вы ему - зачем это нужно...
Интересная точка зрения. А все велосипеды в мире изобретены/созданы одним производителем?
Человек ведь пишет для себя, для своих проектов. Сюда выкладывает, чтобы народ потестировал и т.п. А Вы ему - зачем это нужно...
>...не стоит изобретать велосипед, только зря время потратишь...
Я думал это известная всем поговорка, смысл которой должен быть ясен =)
>А Вы ему - зачем это нужно...
Ну может и нужно. Тут трудно спорить: если цель узнать JS получше и написать свой небольшой и полезный скриптик, то тогда время потрачено не зря.
Если цель быстро и качественно решить поставленную задачу, то проще использовать уже готовое решение. В начале топика написано "...готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось...", но приведена уже куча ссылок со вполне нормальным решением этой задачи. И с этой точки зрения время вседаки потрачено зря. Но так бывает и в этом нет ничего плохого.
Я думал это известная всем поговорка, смысл которой должен быть ясен =)
>А Вы ему - зачем это нужно...
Ну может и нужно. Тут трудно спорить: если цель узнать JS получше и написать свой небольшой и полезный скриптик, то тогда время потрачено не зря.
Если цель быстро и качественно решить поставленную задачу, то проще использовать уже готовое решение. В начале топика написано "...готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось...", но приведена уже куча ссылок со вполне нормальным решением этой задачи. И с этой точки зрения время вседаки потрачено зря. Но так бывает и в этом нет ничего плохого.
Дело в том, что из предложенных ссылок для решения задачи подходит только одна - от serzhb. И то там другая реализация.
>Я думал это известная всем поговорка, смысл которой должен быть ясен =)
А поговорка, как говориться, мимо нот. Автор не утверждал, что он изобрел велосипед. Он лишь смастерил свой, неповторимый в контексте хабра и не только (его велосипед легок, прост в управлении в сравнении с профессиональными моделями).
>Если цель быстро и качественно решить поставленную задачу...
>В начале топика написано…
Там же есть и то, что Вы упустили из виду: "Пройдясь по хабра-поиску выяснил...". Поэтому Вы напрасно гадаете, какие у автора цели – они определены совершенно четко и ясно.
>И с этой точки зрения время вседаки потрачено зря.
С подобной точкой зрения я сталкивался не раз. Мне тоже писали: "Заче-е-ем? Возьми готовое". Доходило даже до: "Может свою ось возьмешься писать?". А я думаю так, что это программиста не касается. Ему если понадобилось или заставили – он написал, а если сказали взять какую-то либу, то он так и делает. Так что "советы", подобные вашим, его не волнуют, т.к. это просто-напросто не по адресу.
А поговорка, как говориться, мимо нот. Автор не утверждал, что он изобрел велосипед. Он лишь смастерил свой, неповторимый в контексте хабра и не только (его велосипед легок, прост в управлении в сравнении с профессиональными моделями).
>Если цель быстро и качественно решить поставленную задачу...
>В начале топика написано…
Там же есть и то, что Вы упустили из виду: "Пройдясь по хабра-поиску выяснил...". Поэтому Вы напрасно гадаете, какие у автора цели – они определены совершенно четко и ясно.
>И с этой точки зрения время вседаки потрачено зря.
С подобной точкой зрения я сталкивался не раз. Мне тоже писали: "Заче-е-ем? Возьми готовое". Доходило даже до: "Может свою ось возьмешься писать?". А я думаю так, что это программиста не касается. Ему если понадобилось или заставили – он написал, а если сказали взять какую-то либу, то он так и делает. Так что "советы", подобные вашим, его не волнуют, т.к. это просто-напросто не по адресу.
Нехватает растягивание картинки.
То есть если она изначально 200х200, но мне надо растянуть ее до 300х300.
То есть если она изначально 200х200, но мне надо растянуть ее до 300х300.
jQuery UI -> Demos -> Real-World -> Image Cropper.
Ссылку дал на свой сайт, так как на офсайте этот пример работает не совсем корректно (нет работает drag), но это только потому, что у них для примеров не последняя версия загружается.
Ссылку дал на свой сайт, так как на офсайте этот пример работает не совсем корректно (нет работает drag), но это только потому, что у них для примеров не последняя версия загружается.
Да, снова 8 точек, спасибо за ссылку.
За что не люблю плагины jQuery - так это за тежяловесность и глюки.
Как и в ЯХУ-скрипте - нет возможности фиксированного кропа и ресайза фотки онли.
Ну а в целом, подбирается коллекция кроперов :-)
За что не люблю плагины jQuery - так это за тежяловесность и глюки.
Как и в ЯХУ-скрипте - нет возможности фиксированного кропа и ресайза фотки онли.
Ну а в целом, подбирается коллекция кроперов :-)
Глюки кроппера были (и есть, скорее всего) на IE6, больше нигде ничего не наблюдал. Но в текущем варианте (по ссылке) глюков не наблюдается. Да и вообще - я использую довольно много плагинов jQuery - проблем не замечаю.
нет возможности фиксированного кропа и ресайза фотки онли.
Ты о чем?
нет возможности фиксированного кропа и ресайза фотки онли.
Ты о чем?
Задача: вырезать автарки для сайта 90*90, чтобы юзер ничего не напортачил и вырезал то, что ему нравится. Решите её кропом в 8 точек без ресайза фотки?
ЧИТАТЬ! Внимательнее читать статью, там в начале всё написано!
ЧИТАТЬ! Внимательнее читать статью, там в начале всё написано!
Глючит неимоверно
Аналог на JQuery, на мой взгляд, не менее приятный:
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
О ДА! Интересное решение. Разработчики пошли "другим путем", но решили ту же задачу. Спасибо за ссылку!
спасибо.
помню давно делал как подобное, но версия была только для прототипа, очень долго возился с напильником, в итоге добавил еще таких функций:
- ресайз кропа
- масштабируемость исходной картинки; задаются максимальные размеры отображения img в котором происходит кроп выделение, т.е. если изображение допустим 1800X1200 то чтобы не выползало за экран
- задаются размеры кропа (w,h), если выключен аспект ратио, то это будут максимальные размеры превью, иначе размер превью будет соответствовать этим размерам
- минимальные размеры кропа устанавливаются исходя из изображения, т.е. чтобы при посроении превью не было увеличения исходного изображения и следовательно ее пикселизации
- js превью отображет точь в точь картинку включая режим с выключенным aspect ratio, которая получиться после php ресайза
- ресайз кропа
- масштабируемость исходной картинки; задаются максимальные размеры отображения img в котором происходит кроп выделение, т.е. если изображение допустим 1800X1200 то чтобы не выползало за экран
- задаются размеры кропа (w,h), если выключен аспект ратио, то это будут максимальные размеры превью, иначе размер превью будет соответствовать этим размерам
- минимальные размеры кропа устанавливаются исходя из изображения, т.е. чтобы при посроении превью не было увеличения исходного изображения и следовательно ее пикселизации
- js превью отображет точь в точь картинку включая режим с выключенным aspect ratio, которая получиться после php ресайза
Вот еще реализация crop на mootools. Mooloos удобен тем что все его библиотеки зашиты в один js. В заголовке всего + одна строчка.
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="MooCrop.js"></script>
Несжатый MooCrop занимает 9K
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="MooCrop.js"></script>
Несжатый MooCrop занимает 9K
Всё замечательно, кроме одного момента — можно подобрать ситуацию, когда мышь одновременно нажимает на квадратик и на уголок, после этого, не отпуская мышь, можно наблюдать забавные перемещения квадратика при ресайзе. Думаю, можно как-то отслеживать одновременность событий и реагировать только на одно из них.
Девочка очень красивая
Для подавления выделения попробуйте в конце каждого mousemove ставить вот такую функцию, она универсальна для все браузеров, отбивает любые стандартные действия:
stopEvent: function (event){
if (event.preventDefault) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble = true;
}
return false;
}
return stopEvent();
Я тоже делал такую штуку для одного проекта. Только я не кртинку уменьшал, а кадр увеличивал. Самый главный промах и у вас и у меня — выделение с помошью осветляющего региона. А ведь по хорошему имеено эта часть идет на превьюшку, а значит нужно засветлять или затемнять все что находится вокруг.
stopEvent: function (event){
if (event.preventDefault) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble = true;
}
return false;
}
return stopEvent();
Я тоже делал такую штуку для одного проекта. Только я не кртинку уменьшал, а кадр увеличивал. Самый главный промах и у вас и у меня — выделение с помошью осветляющего региона. А ведь по хорошему имеено эта часть идет на превьюшку, а значит нужно засветлять или затемнять все что находится вокруг.
Несколько лет назад делал подобную вещь (у меня двигался и ресайзился сам кроп). Код старый, уж строго не судите ;) Скоро я собираюсь эту вещь переписывать и модернизировать, а пока — просто как еще одинработающий пример...
Версия в работе лежит вот тут.
Выделение, у меня кстати блокировалось (на то время; в фф3 это уже не работает нормально), можете в принципе глянуть, там все было как-то просто...
Версия в работе лежит вот тут.
Выделение, у меня кстати блокировалось (на то время; в фф3 это уже не работает нормально), можете в принципе глянуть, там все было как-то просто...
На самом деле у вас один из самых лучших вариантов. Еще бы выделение было с помошью полупрозрачности, а не тупо цвет. Или просто обводка.
Ну просто этот вариант, в отличие от Y и jQ вариантов, продавался. Но, учитывая давность и срок (2 дня), внутри он далек от идеала, а руки всё не доходили доработать...
<оффтоп>Я, как запущу "сайт себя" и проведу ревизию кода, выложу несколько хороших (имхо ;) ) штук...</оффтоп>
Насчет "тупо цвет" не совсем понял — там сделан фильтр для ие и полупрозрачный пнг. Это не та полупрозрачность? ;) Впрочем, до кондиции это доводится легким изменением стиля.
<оффтоп>Я, как запущу "сайт себя" и проведу ревизию кода, выложу несколько хороших (имхо ;) ) штук...</оффтоп>
Насчет "тупо цвет" не совсем понял — там сделан фильтр для ие и полупрозрачный пнг. Это не та полупрозрачность? ;) Впрочем, до кондиции это доводится легким изменением стиля.
Да, с выделением в опере всё равно проблемы. А вот фаербаг довольно быстро досчитал количество ошибок до 1000 :)
Я не понял, а где здесь собственно кроп? Ресайз увидел, ну рамочка есть, да. А файла на исходе откропленного то нет.
burПока по проблемам нечего сказать, фф2 (мак) работает отлично!
Полезная штуковина.
Небольшая мелочь - на мой вкус уместней было бы полупрозрачностью приглушить то, что не попадет в кроп, а выделение наоборот оставить контрастным.
Небольшая мелочь - на мой вкус уместней было бы полупрозрачностью приглушить то, что не попадет в кроп, а выделение наоборот оставить контрастным.
UFO just landed and posted this here
Показанные примеры - не смог изменить размер.
Судя по описанию, не jQuery - лишний код.
Проще повторить идею на jQuery + jQuery UI (draggable + resizable + opacity), чем использовать код автора.
Судя по описанию, не jQuery - лишний код.
Проще повторить идею на jQuery + jQuery UI (draggable + resizable + opacity), чем использовать код автора.
Глюк в фаерфоксе. Если взятья очень близко к раю, а потом потянуть мышь к этому краю, захват как-бы «соскочит». Вы mousemove не на document сделали, что-ли?
Впечатляет. Пригодится. Спасибо.
Совсем недавно похожее реализовал: http://dmitry.baranovskiy.com/work/avata…
в третьем примере X и Y кропа попутаны ;)
А поворот пожно реализовать на произвольный градус?
UFO just landed and posted this here
Я не совсем понял: фотография обязательно должна предварительно звгружаться на сервер или можно всю обработку делать локально на компе клиента, а на сервер загружать готовую фотографию после кропа и ресайза?
Непосредственное изменение размеров и масштаба изображения с получением новой картинки происходит на сервере. JavaScript может только отдать нужные координаты.
Поскольку юзеры убеждены, что 5-мегапиксельный фотик это вчерашний день, а 8 мегапикселей это вэригуд, а 16 - еще лучше, только денег нет, - размер джипегов, из которых они пытаются сделать аватар, нередко превышает 1 - 1,5 мегабайта. А на серваке эти монстры раскладываются по битам, для обработки, и занимают в несколько раз больший обьем. При большом количестве посетителей нагрузка на сервер получается несоизмерима с пользой такого сервиса. Проще надавать ссылок на бесплатные фоторедакторы, чтобы грузили готовые фотки приемлемого размера. Или найти плагин к браузеру, умеющий это делать.
Респект автору!
Решился взяться за доделку. Да не буду убиенным:
http://i-web.com.ua/fc-cropresize2.zip
Решился взяться за доделку. Да не буду убиенным:
http://i-web.com.ua/fc-cropresize2.zip
в IE8b2 кроп уже непрозрачный, а в линуксовом FF3.0.1 перетаскивание работает через раз
интересная штука выявилась с изменением вёрстки страницы, на которой я тестил вашу разработку:
при первой загрузке страницы и кроп и картинка правого нижнего угла не позиционируются на своих местах, но после обновления страницы всё становится куда следует (это и в Win и в Linux).
а так вещь полезная и лаконичная, одобрям-с :)
интересная штука выявилась с изменением вёрстки страницы, на которой я тестил вашу разработку:
при первой загрузке страницы и кроп и картинка правого нижнего угла не позиционируются на своих местах, но после обновления страницы всё становится куда следует (это и в Win и в Linux).
а так вещь полезная и лаконичная, одобрям-с :)
нашел тут я готовое решение на jquery+php
www.sigel.ru/12-resajz_kartinki_crop_resize_s_php_i_jquery
умеет все и везде работает, включая закачку на сервер + может полодить любое количество разных размеров
www.sigel.ru/12-resajz_kartinki_crop_resize_s_php_i_jquery
умеет все и везде работает, включая закачку на сервер + может полодить любое количество разных размеров
Автор, удалось ли реализовать пункты раздела FUTURE?
Каково текущее состояние скрипта fc-cropresizer?
О планах
* Сделать возможность ресайза области кропа
* Проработать ресайз изображения в сторону увеличения
* То, что вы предложите :-)
Каково текущее состояние скрипта fc-cropresizer?
Ссылки умерли. Нагуглились вот эти:
Эбаут — 2007.fastcoder.ru/projects/?id=2
Демка — 2007.fastcoder.ru/demo/FC-CropResizer/v0.0.1/demo.html
Код — 2007.fastcoder.ru/proj/?id=2
Эбаут — 2007.fastcoder.ru/projects/?id=2
Демка — 2007.fastcoder.ru/demo/FC-CropResizer/v0.0.1/demo.html
Код — 2007.fastcoder.ru/proj/?id=2
Sign up to leave a comment.
Crop & Resize на страницах ваших сайтов