Crop & Resize на страницах ваших сайтов

[IIIyT]

Спасибо, давно хотел поискать подобную штуку, но всё время не было времени, а она тут как тут) Сегодня протестирую.

[bur]

Пишите о результатах теста. Версия 0.0.1 - так что всё только начинается :-)
Но работает, вроде, стабильно.

[IIIyT]

Естественно отпишу) у вас там есть мыльце? Завтра-послезавтра протестирую на нагрузку.

[bur]

Лучше в личку. Спасибо!

[lauri]

Спасибо за полезную статью! Плюс в карму, а пост - в закладки.

[yellow_duck]

Присоединяюсь

[AlphaX]

Отлично, как раз собирался писать нечто подобное для своего проекта :)

[jiexaspb]

Искал недавно, большое спасибо

[CRL]

Ммммм. Здорово.

[igorekk]

Спасибо большое, интересно.
PS. Где-то недавно видел в качестве плагина для jQuery :)

[yellow_duck]

если найдешь - дай ссылку в личку

[igorekk]

http://remysharp.com/2007/03/19/a-few-mo…
Банально в Google: jquery image crop

[igorekk]

Блин, ступил.
Вот ссылка: http://odyniec.net/projects/imgareaselec…

[bur]

Спасибо, хороший кроппер!
Но опять немного не то. Нельзя задачу ресайза сводить только к кропу. Тут уже писали в комментах.

[igorekk]

Согласен. Просто мне для проекта нужен был банальный кроп :)

[lunatic]

Помомему логичней было бы ресайзить сам прямоугольник, который можно таскать.

[homm]

Но помещается оно с искажениями (в эксплорере точно, в опере биленейное сглаживание, в фф не в курсе), а когда на сервере будет масштабируется, скорее всего будет более качественно, хотя если пользователь под оперой, какая разница ;)

[klyavin]

фф тоже без сглаживания делает

[bur]

Не совсем верно, необходима и возможность фиксированного кропа, и его ресайз - на выбор. Второе вскоре будет реализовано.

[lunatic]

У меня мозг ломается таскать в двух разных местах.
Посмотрите - http://lunatic.dev.jetstyle.ru/imagetool…
Примерно тоже самое. Но в вашем примере можно искажать картинку, меняя только высоту или ширину.
Это я давным давно когда-то писал. Получить превью можно даблкликом по выделению.

[bur]

Дело в том, что кроп и ресайз - это 2 разные задачи, разве вы не ощущали этого работая в фотошопе? Подумайте, какой скрипт лучше справится с задачей вырезания аватарок, Ваш или мой? :-)

[tenshi]

так и представляю... гружу фотку 4000х3000 пикселей и начинаю мотать полосы прокрутки в поисках контрола для ресайза...

[bur]

Как 8 точек избавять вас от этой проблемы?
Вам тоже придется скроллить и тянуть несколько точек.
Ну а если делать зум фотки, то можно его делать и в моем скрипте под размер страницы.

[tenshi]

мне нужно вырезать кусок изображения. не в пикселях. пиксели - это там, за монитором. я вижу изображение, размером в некоторое количество угловых координат. мне нужно вырезать, например, лицо. я хватаюсь за рамку изображения (не за угол какого-то квадратика!) и тяну её, отрезая тем самым лишнее. и мне совершенно наплевать, выделю я зону величиной 50 пикселей на 100-пиксельном изображении или 100 пикселей на 200-пиксельном. я выделил то, что меня интересует. пиксели уж рассчитайте как-нибудь сами.

[bur]

Есть такая хорошая концепция, что вижу, то и получаю. Надо стараться следовать ей, чтобы не было неприятных сюрпризов.

[tenshi]

я вижу выбеленную картинку. я точно получу именно её?

[bur]

Уели :)
Да, это недостаток, его надо исправлять.

[tenshi]

кстати, я категорически против "8 точек". особенно таких кривых реализаций с их пропаданием при перемещении, как тут в комментах предложили... пунктирной рамки более чем достаточно.

[chilly]

По сути не важно какого размера будет прямоугольник в браузере, задача на клиенте определить, какая часть изображения будет использоваться в качестве превью. Клиенту известны пропорции, а какого рамера будет превью - это может решать сервер.
И одно пожелание: при ресайзе изображения (раз пошли по такому пути) неплохо было бы поцизионировать прямоугольник, чтобы смотрел в одну и ту же точку на изображении.

[bur]

Слишком сложно. Клиент должен думать о пропорциях, сервер что ресайзить.
Должно работать ПО_ЧЕЛОВЕЧЕСКИ, а именно - что вырезал, то и получил.

[chilly]

В таком случае, если возникнет необходимость создавать, например, несколько квадратных превью различных размеров с одного изображения, пользователю придётся повторять одну и туже процедуру для разных размеров квадрата и одного участка изображения.

[bur]

Как написано в конце статьи, из нововведений в первую очередь появится резайз области кропа ;-)

[yellow_duck]

да это же для разных целей

[homm]

Да нет вообще-то. На клиенте же всё равно предпросмотр, сам ресайз всё равно буде на сервере, так что показывать лучше картинку в натуральную величину.

[Reijii]

Спасибо! Очень нужная штука! Спасибо!

Заодно проверил в браузерах на MacOS X 10.5.3:
FF3.0RC2 - ok
Safari 3.1.1 - ok
Opera 9.27 - ok (и то же самое выделение, что и на Win)

[bur]

Спасибо, обновлю топик Вашими данными.

[xsash]

Opera 9.50 beta 9981, win32
все гуд

[bur]

Спасибо! В статье уже указано Opera 9+, но в этом браузере я не тестировал.
Похоже у Оперы жизнь налаживается потихоньку :-)

[NemeZZiZZ]

Просто автор заведомо написал нормально, грамотно, как веб-разработчик, а не с отмазками в коде, мол, пользователи оперы идут лесом. В вконтакте такие люди должны работать. Да и много где ещё.
Спасибо Вам. Интересная реализация.

[sunnybear]

а как оно отдает параметры обратно? т.е. поресайзил-поресайзил — потом на сервер отправил и сохранил, как?

[bur]

Читайте статью:

onUpdate — единственное обязательное свойство (точнее метод). Принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта кроп-ресайза. В третьем примере демки все необходимые данные выводятся в завершающий страницу текстовый блок. Этот метод жизненно необходим для сохранения того, что вы наменяли, обычно в hidden-поля формы.

+ третий пример в демке

[Keroll]

здорово, но не густо с настройками. Мне кажется на FLASH решить эту проблему можно более универсально!

[bur]

Настроек будет больше, но именно в области ресайза/кропа. Скрипт не задумывался, как редактор фоток.

[NemeZZiZZ]

Мне кажется, что конкретно для этой задачи больше и не нужно. Тем более не нужен флеш :)

[cazebo]

zoom в Лисе портит всю картину, уезжает прямоугольник кропа относительно самой фотографии

[bur]

Это фича! :-)
Кроп не должен мешать ресайзу, и смещается, когда до него доходит граница фотки.

[gigigi]

FireFox 3RC1 - Linux
Сначала вроде работало нормально потом стало "заедать". То объект тащится как картинка то по отпусканию кнопки продолжает ездить за кусором. А так штука очень полезная, спасибо вам.

[bur]

Спасибо! Описанная бага случается, если мышь на пределы окна вытащить, что в общем-то забороть сложно.

[Kroz]

В FF3RC2 наблюдается следующий баг (или фича):
В любом из трех примеров начинаю перемещать выделение. Все ОК. Теперь отпускаю левую кнопку мыши. Пробую еще раз, и не идет! Курсор принимает вид "перемещение невозможно".
Если попробовать перемещать в других примерах - там все ок. Возвращаемся к первому - опять все ок. Такое ощущение, что у Вас есть какая-то глобальная переменная, которая сбрасывается при переходе от одной картинки к другой.
Трабла наблюдается на всех изображениях. Иногда (раза два получилось), баг не наблюдается: можно дважды поперемещать выделение внутри одной картинки.
В IE6 все отлично, как Вы и написали.

[bur]

Спасибо, попробую добраться до третьего ФФ и воспроизвести.
Глобальных переменных нет вообще, обижаете :-)

[alexshelkov]

Вроде бы есть это, чем не подходит?
http://developer.yahoo.com/yui/imagecropper/

[bur]

Спасибо за ссылку, не знал.
А принцип работы там немного другой, так что скрипты совсем не идентичны.

[alexshelkov]

Тогда это:
http://developer.yahoo.com/yui/resize/
Я просто к тому что не стоит изобретать велосипед, только зря время потратишь...

[bur]

Велосипед изобретать безусловно не стоит. А вот создавать легкие и быстрые приложению, точечно бьющие по конкретной задаче, имхо, правильно, особенно если писать их на чистом js. Недостаток всех js-фреймфорков - неповоротливость и слишком большое число настроек.

[akzhan]

base.js и jquery.js - крохотные фреймворки.

к тому же уменьшают объём нашего кода в разы, одновременно увеличивая его портабельность.

[AKS]

>...не стоит изобретать велосипед, только зря время потратишь...

Интересная точка зрения. А все велосипеды в мире изобретены/созданы одним производителем?
Человек ведь пишет для себя, для своих проектов. Сюда выкладывает, чтобы народ потестировал и т.п. А Вы ему - зачем это нужно...

[alexshelkov]

>...не стоит изобретать велосипед, только зря время потратишь...
Я думал это известная всем поговорка, смысл которой должен быть ясен =)
>А Вы ему - зачем это нужно...
Ну может и нужно. Тут трудно спорить: если цель узнать JS получше и написать свой небольшой и полезный скриптик, то тогда время потрачено не зря.
Если цель быстро и качественно решить поставленную задачу, то проще использовать уже готовое решение. В начале топика написано "...готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось...", но приведена уже куча ссылок со вполне нормальным решением этой задачи. И с этой точки зрения время вседаки потрачено зря. Но так бывает и в этом нет ничего плохого.

[bur]

Дело в том, что из предложенных ссылок для решения задачи подходит только одна - от serzhb. И то там другая реализация.

[AKS]

>Я думал это известная всем поговорка, смысл которой должен быть ясен =)

А поговорка, как говориться, мимо нот. Автор не утверждал, что он изобрел велосипед. Он лишь смастерил свой, неповторимый в контексте хабра и не только (его велосипед легок, прост в управлении в сравнении с профессиональными моделями).

>Если цель быстро и качественно решить поставленную задачу...
>В начале топика написано…

Там же есть и то, что Вы упустили из виду: "Пройдясь по хабра-поиску выяснил...". Поэтому Вы напрасно гадаете, какие у автора цели – они определены совершенно четко и ясно.

>И с этой точки зрения время вседаки потрачено зря.

С подобной точкой зрения я сталкивался не раз. Мне тоже писали: "Заче-е-ем? Возьми готовое". Доходило даже до: "Может свою ось возьмешься писать?". А я думаю так, что это программиста не касается. Ему если понадобилось или заставили – он написал, а если сказали взять какую-то либу, то он так и делает. Так что "советы", подобные вашим, его не волнуют, т.к. это просто-напросто не по адресу.

[jiexaspb]

Нехватает растягивание картинки.

То есть если она изначально 200х200, но мне надо растянуть ее до 300х300.

[bur]

Ага, это есть в планах
проработать ресайз изображения в сторону увеличения

[fxposter]

jQuery UI -> Demos -> Real-World -> Image Cropper.

Ссылку дал на свой сайт, так как на офсайте этот пример работает не совсем корректно (нет работает drag), но это только потому, что у них для примеров не последняя версия загружается.

[bur]

Да, снова 8 точек, спасибо за ссылку.
За что не люблю плагины jQuery - так это за тежяловесность и глюки.
Как и в ЯХУ-скрипте - нет возможности фиксированного кропа и ресайза фотки онли.
Ну а в целом, подбирается коллекция кроперов :-)

[fxposter]

Глюки кроппера были (и есть, скорее всего) на IE6, больше нигде ничего не наблюдал. Но в текущем варианте (по ссылке) глюков не наблюдается. Да и вообще - я использую довольно много плагинов jQuery - проблем не замечаю.

нет возможности фиксированного кропа и ресайза фотки онли.
Ты о чем?

[bur]

Задача: вырезать автарки для сайта 90*90, чтобы юзер ничего не напортачил и вырезал то, что ему нравится. Решите её кропом в 8 точек без ресайза фотки?
ЧИТАТЬ! Внимательнее читать статью, там в начале всё написано!

[fxposter]

Убрал .resizable().

[bur]

Ага, а дальше? Фотку то хочется уменьшить, чтобы рожа в фиксированный размер влезла :-)

[fxposter]

Ага. Теперь вьехал. Ну тут уже без переделки кода небольшой не обойдешься.

[akzhan]

исправляется одна строка в скрипте.

или пишекться свой. - с помощью draggable и resizable весь плагин получается крохотным и портируемым - без затрат.

[pxx]

Глючит неимоверно

[serzhb]

Аналог на JQuery, на мой взгляд, не менее приятный:
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

[bur]

О ДА! Интересное решение. Разработчики пошли "другим путем", но решили ту же задачу. Спасибо за ссылку!

[akzhan]

спасибо.

[cevek]

помню давно делал как подобное, но версия была только для прототипа, очень долго возился с напильником, в итоге добавил еще таких функций:
- ресайз кропа
- масштабируемость исходной картинки; задаются максимальные размеры отображения img в котором происходит кроп выделение, т.е. если изображение допустим 1800X1200 то чтобы не выползало за экран
- задаются размеры кропа (w,h), если выключен аспект ратио, то это будут максимальные размеры превью, иначе размер превью будет соответствовать этим размерам
- минимальные размеры кропа устанавливаются исходя из изображения, т.е. чтобы при посроении превью не было увеличения исходного изображения и следовательно ее пикселизации
- js превью отображет точь в точь картинку включая режим с выключенным aspect ratio, которая получиться после php ресайза

[apelsyn]

Вот еще реализация crop на mootools. Mooloos удобен тем что все его библиотеки зашиты в один js. В заголовке всего + одна строчка.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="MooCrop.js"></script>

Несжатый MooCrop занимает 9K

[Aivean]

Всё замечательно, кроме одного момента — можно подобрать ситуацию, когда мышь одновременно нажимает на квадратик и на уголок, после этого, не отпуская мышь, можно наблюдать забавные перемещения квадратика при ресайзе. Думаю, можно как-то отслеживать одновременность событий и реагировать только на одно из них.

[bur]

Спасибо, занесено в баглист!

[dos]

Девочка очень красивая

[homm]

Для подавления выделения попробуйте в конце каждого mousemove ставить вот такую функцию, она универсальна для все браузеров, отбивает любые стандартные действия:

stopEvent: function (event){
if (event.preventDefault) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble = true;
}
return false;
}
return stopEvent();

Я тоже делал такую штуку для одного проекта. Только я не кртинку уменьшал, а кадр увеличивал. Самый главный промах и у вас и у меня — выделение с помошью осветляющего региона. А ведь по хорошему имеено эта часть идет на превьюшку, а значит нужно засветлять или затемнять все что находится вокруг.

[bur]

ООО! Спасибо большое, попробую.
Про подавление стандартного поведения знал, но не думал, что оно распространяется и на выделение.
Насчет проблемы - ИМХО, скорость и безглючность важнее описанного недостатка.

[homm]

Не всегда ;) Бывает и наоборот.

[homm]

Ой, ей только event еше передавать нужно, я верен что вы и сами догадались, но я на всякий случай ;)

[hlomzik]

Несколько лет назад делал подобную вещь (у меня двигался и ресайзился сам кроп). Код старый, уж строго не судите ;) Скоро я собираюсь эту вещь переписывать и модернизировать, а пока — просто как еще одинработающий пример...
Версия в работе лежит вот тут.
Выделение, у меня кстати блокировалось (на то время; в фф3 это уже не работает нормально), можете в принципе глянуть, там все было как-то просто...

[homm]

На самом деле у вас один из самых лучших вариантов. Еще бы выделение было с помошью полупрозрачности, а не тупо цвет. Или просто обводка.

[hlomzik]

Ну просто этот вариант, в отличие от Y и jQ вариантов, продавался. Но, учитывая давность и срок (2 дня), внутри он далек от идеала, а руки всё не доходили доработать...
<оффтоп>Я, как запущу "сайт себя" и проведу ревизию кода, выложу несколько хороших (имхо ;) ) штук...</оффтоп>
Насчет "тупо цвет" не совсем понял — там сделан фильтр для ие и полупрозрачный пнг. Это не та полупрозрачность? ;) Впрочем, до кондиции это доводится легким изменением стиля.

[homm]

Вместо png лучше для однородного фона использовать opacity, вот у меня например этот png не загрузился, и я увидел сплошной цвет :)

[hlomzik]

я знаю) это было давно, опера тогда еще не очень много умела, а прозрачность в фф была в виде -moz-opacity, и я не решился это использовать )

[homm]

Да, с выделением в опере всё равно проблемы. А вот фаербаг довольно быстро досчитал количество ошибок до 1000 :)

[niazique]

Я не понял, а где здесь собственно кроп? Ресайз увидел, ну рамочка есть, да. А файла на исходе откропленного то нет.

[ognevsky]

 bur адский человек, респект очередной раз!
Пока по проблемам нечего сказать, фф2 (мак) работает отлично!

[vlza]

Полезная штуковина.
Небольшая мелочь - на мой вкус уместней было бы полупрозрачностью приглушить то, что не попадет в кроп, а выделение наоборот оставить контрастным.

[homm]

Как-то всё глючит не по детски и ничего не работает :)

[homm]

Изображение скачет влево-вправо, и у него еще есть фантом :)
А то, что не ресайзит без серверной части, оно и понятно :)

[akzhan]

Показанные примеры - не смог изменить размер.

Судя по описанию, не jQuery - лишний код.

Проще повторить идею на jQuery + jQuery UI (draggable + resizable + opacity), чем использовать код автора.

[akzhan]

Кстати, зпа информацию о размере выделенной области в её краю - громадный респект. удобная фича.

[homm]

Глюк в фаерфоксе. Если взятья очень близко к раю, а потом потянуть мышь к этому краю, захват как-бы «соскочит». Вы mousemove не на document сделали, что-ли?

[homm]

Прошу прощения, оказывается в ФФ3б5 вообще каждое второе перемешение области выделения не работает, безотносительно места нажатия. Проверьте пожалуйста в ФФ3рс2 более внимательно, вдруг глюк все-же не в бетте.

[DeMx]

Впечатляет. Пригодится. Спасибо.

[DmitryBaranovskiy]

Совсем недавно похожее реализовал: http://dmitry.baranovskiy.com/work/avata…

[bur]

В коллекцию. Здесь уже был аналогичный скрипт.
Однако, Ваш глючит, после некоторых перемещений по onmove начинают сыпаться ошибки.

[DmitryBaranovskiy]

Так и не смог повторить ваш баг. Ну не глючит он у меня, хоть тресни. Какой браузер-то?

[majesty]

в третьем примере X и Y кропа попутаны ;)

[bur]

Спасибо, поправлю.

[vitkon]

А поворот пожно реализовать на произвольный градус?

[bur]

Вообще можно, но такой задачи не ставилось. Смотрите в сторону VML & Canvas.

[vitkon]

гляну, спасибо.

[dedpyhto]

Я не совсем понял: фотография обязательно должна предварительно звгружаться на сервер или можно всю обработку делать локально на компе клиента, а на сервер загружать готовую фотографию после кропа и ресайза?

[bur]

Непосредственное изменение размеров и масштаба изображения с получением новой картинки происходит на сервере. JavaScript может только отдать нужные координаты.

[dedpyhto]

Поскольку юзеры убеждены, что 5-мегапиксельный фотик это вчерашний день, а 8 мегапикселей это вэригуд, а 16 - еще лучше, только денег нет, - размер джипегов, из которых они пытаются сделать аватар, нередко превышает 1 - 1,5 мегабайта. А на серваке эти монстры раскладываются по битам, для обработки, и занимают в несколько раз больший обьем. При большом количестве посетителей нагрузка на сервер получается несоизмерима с пользой такого сервиса. Проще надавать ссылок на бесплатные фоторедакторы, чтобы грузили готовые фотки приемлемого размера. Или найти плагин к браузеру, умеющий это делать.

[goshi]

Респект автору!
Решился взяться за доделку. Да не буду убиенным:
http://i-web.com.ua/fc-cropresize2.zip

[killest]

в IE8b2 кроп уже непрозрачный, а в линуксовом FF3.0.1 перетаскивание работает через раз

интересная штука выявилась с изменением вёрстки страницы, на которой я тестил вашу разработку:
при первой загрузке страницы и кроп и картинка правого нижнего угла не позиционируются на своих местах, но после обновления страницы всё становится куда следует (это и в Win и в Linux).

а так вещь полезная и лаконичная, одобрям-с :)

[WebSinner]

нашел тут я готовое решение на jquery+php
www.sigel.ru/12-resajz_kartinki_crop_resize_s_php_i_jquery

умеет все и везде работает, включая закачку на сервер + может полодить любое количество разных размеров

[Stac]

Автор, удалось ли реализовать пункты раздела FUTURE?

О планах
* Сделать возможность ресайза области кропа
* Проработать ресайз изображения в сторону увеличения
* То, что вы предложите :-)

Каково текущее состояние скрипта fc-cropresizer?

[ajaxtelamonid]

Ссылки умерли. Нагуглились вот эти:
Эбаут — 2007.fastcoder.ru/projects/?id=2
Демка — 2007.fastcoder.ru/demo/FC-CropResizer/v0.0.1/demo.html
Код — 2007.fastcoder.ru/proj/?id=2