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

    Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

    К делу

    Внешне задумка выглядит так:


    Зачем?

    Задача была сделать универсальный, по-возможности, скрипт, который мог бы заниматься ресайзом (изменением размеров) и кропом (обрезанием) любых изображений. Это иногда бывает нужно:
    * для «умного» вырезания превью из большого изображения,
    * для подготовки аватара из любой загруженной фотки,
    * ну и мало ли еще зачем нужен кроп и ресайз :-)

    Смотрим как оно выглядит и работает.

    Установка

    Скачайте архив fc-cropresizer.zip (97Кб) и распакуйте в нужную директорию. Не пугайтесь большого размера дистрибутива, там в папке demo-photo находятся изображения, которые можно смело удалять после просмотра демки.

    Кроме папки с фотками в распакованном архиве вы найдете:
    * папку imgcropresize — включает пару мелких изображений непосредственно для кроп-ресайза;
    * demo.html — та самая демка;
    * fc-cropresizer.css — стили;
    * fc-cropresizer.js — движок;
    * LICENSE — лицензию BSD;

    Подключайте в js- и css-файлы, кладите куда нужно папку с изображениеми и начинаем!

    Использование

    В любом удобном месте (head или body — не важно) пишем небольшой JavaScript-сценарий, для инициализации кропресайза:

    cropresizer.getObject("photo1").init({
    cropWidth : 150,
    cropHeight : 150,
    onUpdate : function() {}
    });


    cropresizer — это используемый namespace. Методу getObject передается в качестве параметра идентификатор (id) изображения, а метод init в качестве единственного аргумента принимает объект в JSON-формате, свойства которого настроят необходимым образом кроп-ресайз. Рассмотрим эти свойства:

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

    Размеры изображения можно изменять с сохранением пропорции width/height (по-умолчанию), так и без сохранения, для чего нужно выставить свойство saveProportions: false.

    Остановимся более подробно на механизме работы скрипта, чтобы осветить некоторые полезные моменты:
    1) Скрипт получает элемент по идентификатору и заключает его в контейнер (DIV) фиксированных размеров. Таким образом, при уменьшении размеров изображения весь нижеидущий HTML-контент не едет, а остается на месте. Эту возможность можно отключить установив свойство this.withContainer: false.
    2) Как вы знаете, если зажать левую кнопку мыши и перемещать указатель, то сожержимое страницы будет выделяться, что не очень полезно при кропе/ресайзе. Чтобы забороть этот эффект вся страница накрывается прозрачной абсолютно-спозиционированной «пленкой» с z-index:100, которая препятствует выделению. Однако, эта пленка мешает кликать по ссылкам на странице, поэтому либо необходимо поднимать ссылки, либо отключить пленку опцией this.stopSelection: false. Также можно использовать привычные но невалидные onSelectStart=«return false;» для IE и -moz-user-select:none для Gecko.
    3) Можно изменить фон области кропа (по-дефолту белый) или отключить показ размера кропа опциями cropBackground и showCropSize соот-но.

    Совместимость

    Работоспособность скрипта проверена в:
    — IE6, IE7 — WIN;
    — FF1.5, FF2 — WIN;
    — Mozilla 1.7.1 — WIN;
    — Safari 3 WIN;
    — Opera 9+ WIN, однако, наблюдается выделение контента, не смотря на защитную «пленку»;
    — FF2 NIX;
    — Opera NIX;
    — FF3.0RC2 MacOS X 10.5.3
    — Safari 3.1.1 MacOS X 10.5.3
    — Opera 9.27 MacOS X 10.5.3, то же, что с выделением в WIN.

    В старых (ниже девятой) версиях Оперы проблемы. Буду бороть.

    О планах

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

    Кросспост Crop & Resize ваших изображений c http://webew.ru/.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 122

      0
      Спасибо, давно хотел поискать подобную штуку, но всё время не было времени, а она тут как тут) Сегодня протестирую.
        0
        Пишите о результатах теста. Версия 0.0.1 - так что всё только начинается :-)
        Но работает, вроде, стабильно.
          0
          Естественно отпишу) у вас там есть мыльце? Завтра-послезавтра протестирую на нагрузку.
            0
            Лучше в личку. Спасибо!
        +2
        Спасибо за полезную статью! Плюс в карму, а пост - в закладки.
          0
          Присоединяюсь
          0
          Отлично, как раз собирался писать нечто подобное для своего проекта :)
            0
            Искал недавно, большое спасибо
              0
              Ммммм. Здорово.
                0
                Спасибо большое, интересно.
                PS. Где-то недавно видел в качестве плагина для jQuery :)
                  0
                  если найдешь - дай ссылку в личку
                    0
                    http://remysharp.com/2007/03/19/a-few-mo…
                    Банально в Google: jquery image crop
                      +2
                      Блин, ступил.
                      Вот ссылка: http://odyniec.net/projects/imgareaselec…
                        0
                        Спасибо, хороший кроппер!
                        Но опять немного не то. Нельзя задачу ресайза сводить только к кропу. Тут уже писали в комментах.
                          0
                          Согласен. Просто мне для проекта нужен был банальный кроп :)
                  +1
                  Помомему логичней было бы ресайзить сам прямоугольник, который можно таскать.
                  • UFO just landed and posted this here
                      0
                      Но помещается оно с искажениями (в эксплорере точно, в опере биленейное сглаживание, в фф не в курсе), а когда на сервере будет масштабируется, скорее всего будет более качественно, хотя если пользователь под оперой, какая разница ;)
                        0
                        фф тоже без сглаживания делает
                      0
                      Не совсем верно, необходима и возможность фиксированного кропа, и его ресайз - на выбор. Второе вскоре будет реализовано.
                        +1
                        У меня мозг ломается таскать в двух разных местах.
                        Посмотрите - http://lunatic.dev.jetstyle.ru/imagetool…
                        Примерно тоже самое. Но в вашем примере можно искажать картинку, меняя только высоту или ширину.
                        Это я давным давно когда-то писал. Получить превью можно даблкликом по выделению.
                          +1
                          Дело в том, что кроп и ресайз - это 2 разные задачи, разве вы не ощущали этого работая в фотошопе? Подумайте, какой скрипт лучше справится с задачей вырезания аватарок, Ваш или мой? :-)
                            +1
                            так и представляю... гружу фотку 4000х3000 пикселей и начинаю мотать полосы прокрутки в поисках контрола для ресайза...
                              0
                              Как 8 точек избавять вас от этой проблемы?
                              Вам тоже придется скроллить и тянуть несколько точек.
                              Ну а если делать зум фотки, то можно его делать и в моем скрипте под размер страницы.
                                0
                                мне нужно вырезать кусок изображения. не в пикселях. пиксели - это там, за монитором. я вижу изображение, размером в некоторое количество угловых координат. мне нужно вырезать, например, лицо. я хватаюсь за рамку изображения (не за угол какого-то квадратика!) и тяну её, отрезая тем самым лишнее. и мне совершенно наплевать, выделю я зону величиной 50 пикселей на 100-пиксельном изображении или 100 пикселей на 200-пиксельном. я выделил то, что меня интересует. пиксели уж рассчитайте как-нибудь сами.
                                  0
                                  Есть такая хорошая концепция, что вижу, то и получаю. Надо стараться следовать ей, чтобы не было неприятных сюрпризов.
                                    0
                                    я вижу выбеленную картинку. я точно получу именно её?
                                      0
                                      Уели :)
                                      Да, это недостаток, его надо исправлять.
                                  0
                                  кстати, я категорически против "8 точек". особенно таких кривых реализаций с их пропаданием при перемещении, как тут в комментах предложили... пунктирной рамки более чем достаточно.
                            0
                            По сути не важно какого размера будет прямоугольник в браузере, задача на клиенте определить, какая часть изображения будет использоваться в качестве превью. Клиенту известны пропорции, а какого рамера будет превью - это может решать сервер.
                            И одно пожелание: при ресайзе изображения (раз пошли по такому пути) неплохо было бы поцизионировать прямоугольник, чтобы смотрел в одну и ту же точку на изображении.
                              0
                              Слишком сложно. Клиент должен думать о пропорциях, сервер что ресайзить.
                              Должно работать ПО_ЧЕЛОВЕЧЕСКИ, а именно - что вырезал, то и получил.
                                0
                                В таком случае, если возникнет необходимость создавать, например, несколько квадратных превью различных размеров с одного изображения, пользователю придётся повторять одну и туже процедуру для разных размеров квадрата и одного участка изображения.
                                  0
                                  Как написано в конце статьи, из нововведений в первую очередь появится резайз области кропа ;-)
                            0
                            Смотрите http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
                            Автор - молодец, но лучше добавить возможность менять размер прямоугольника, который таскают.
                              +1
                              да это же для разных целей
                                0
                                Да нет вообще-то. На клиенте же всё равно предпросмотр, сам ресайз всё равно буде на сервере, так что показывать лучше картинку в натуральную величину.
                          • UFO just landed and posted this here
                              +1
                              Спасибо! Очень нужная штука! Спасибо!

                              Заодно проверил в браузерах на MacOS X 10.5.3:
                              FF3.0RC2 - ok
                              Safari 3.1.1 - ok
                              Opera 9.27 - ok (и то же самое выделение, что и на Win)
                                0
                                Спасибо, обновлю топик Вашими данными.
                                  +2
                                  Opera 9.50 beta 9981, win32
                                  все гуд
                                    0
                                    Спасибо! В статье уже указано Opera 9+, но в этом браузере я не тестировал.
                                    Похоже у Оперы жизнь налаживается потихоньку :-)
                                      +1
                                      Просто автор заведомо написал нормально, грамотно, как веб-разработчик, а не с отмазками в коде, мол, пользователи оперы идут лесом. В вконтакте такие люди должны работать. Да и много где ещё.
                                      Спасибо Вам. Интересная реализация.
                                0
                                а как оно отдает параметры обратно? т.е. поресайзил-поресайзил — потом на сервер отправил и сохранил, как?
                                  0
                                  Читайте статью:
                                  onUpdate — единственное обязательное свойство (точнее метод). Принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта кроп-ресайза. В третьем примере демки все необходимые данные выводятся в завершающий страницу текстовый блок. Этот метод жизненно необходим для сохранения того, что вы наменяли, обычно в hidden-поля формы.

                                  + третий пример в демке
                                  0
                                  здорово, но не густо с настройками. Мне кажется на FLASH решить эту проблему можно более универсально!
                                    0
                                    Настроек будет больше, но именно в области ресайза/кропа. Скрипт не задумывался, как редактор фоток.
                                      0
                                      Мне кажется, что конкретно для этой задачи больше и не нужно. Тем более не нужен флеш :)
                                      0
                                      zoom в Лисе портит всю картину, уезжает прямоугольник кропа относительно самой фотографии
                                        0
                                        Это фича! :-)
                                        Кроп не должен мешать ресайзу, и смещается, когда до него доходит граница фотки.
                                        +1
                                        FireFox 3RC1 - Linux
                                        Сначала вроде работало нормально потом стало "заедать". То объект тащится как картинка то по отпусканию кнопки продолжает ездить за кусором. А так штука очень полезная, спасибо вам.
                                          0
                                          Спасибо! Описанная бага случается, если мышь на пределы окна вытащить, что в общем-то забороть сложно.
                                          +1
                                          В FF3RC2 наблюдается следующий баг (или фича):
                                          В любом из трех примеров начинаю перемещать выделение. Все ОК. Теперь отпускаю левую кнопку мыши. Пробую еще раз, и не идет! Курсор принимает вид "перемещение невозможно".
                                          Если попробовать перемещать в других примерах - там все ок. Возвращаемся к первому - опять все ок. Такое ощущение, что у Вас есть какая-то глобальная переменная, которая сбрасывается при переходе от одной картинки к другой.
                                          Трабла наблюдается на всех изображениях. Иногда (раза два получилось), баг не наблюдается: можно дважды поперемещать выделение внутри одной картинки.
                                          В IE6 все отлично, как Вы и написали.
                                            0
                                            Спасибо, попробую добраться до третьего ФФ и воспроизвести.
                                            Глобальных переменных нет вообще, обижаете :-)
                                            +2
                                            Вроде бы есть это, чем не подходит?
                                            http://developer.yahoo.com/yui/imagecropper/
                                              0
                                              Спасибо за ссылку, не знал.
                                              А принцип работы там немного другой, так что скрипты совсем не идентичны.
                                                +1
                                                Тогда это:
                                                http://developer.yahoo.com/yui/resize/
                                                Я просто к тому что не стоит изобретать велосипед, только зря время потратишь...
                                                  0
                                                  Велосипед изобретать безусловно не стоит. А вот создавать легкие и быстрые приложению, точечно бьющие по конкретной задаче, имхо, правильно, особенно если писать их на чистом js. Недостаток всех js-фреймфорков - неповоротливость и слишком большое число настроек.
                                                    0
                                                    base.js и jquery.js - крохотные фреймворки.

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

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

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

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

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

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

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

                                                  То есть если она изначально 200х200, но мне надо растянуть ее до 300х300.
                                                    0
                                                    Ага, это есть в планах
                                                    проработать ресайз изображения в сторону увеличения
                                                    +1
                                                    jQuery UI -> Demos -> Real-World -> Image Cropper.

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

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

                                                                  или пишекться свой. - с помощью draggable и resizable весь плагин получается крохотным и портируемым - без затрат.
                                                          0
                                                          Глючит неимоверно
                                                          +2
                                                          Аналог на JQuery, на мой взгляд, не менее приятный:
                                                          http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
                                                            0
                                                            О ДА! Интересное решение. Разработчики пошли "другим путем", но решили ту же задачу. Спасибо за ссылку!
                                                            • UFO just landed and posted this here
                                                              0
                                                              спасибо.
                                                                0
                                                                помню давно делал как подобное, но версия была только для прототипа, очень долго возился с напильником, в итоге добавил еще таких функций:
                                                                - ресайз кропа
                                                                - масштабируемость исходной картинки; задаются максимальные размеры отображения img в котором происходит кроп выделение, т.е. если изображение допустим 1800X1200 то чтобы не выползало за экран
                                                                - задаются размеры кропа (w,h), если выключен аспект ратио, то это будут максимальные размеры превью, иначе размер превью будет соответствовать этим размерам
                                                                - минимальные размеры кропа устанавливаются исходя из изображения, т.е. чтобы при посроении превью не было увеличения исходного изображения и следовательно ее пикселизации
                                                                - js превью отображет точь в точь картинку включая режим с выключенным aspect ratio, которая получиться после php ресайза
                                                                0
                                                                Вот еще реализация crop на mootools. Mooloos удобен тем что все его библиотеки зашиты в один js. В заголовке всего + одна строчка.

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

                                                                Несжатый MooCrop занимает 9K
                                                                • UFO just landed and posted this here
                                                                  +1
                                                                  Всё замечательно, кроме одного момента — можно подобрать ситуацию, когда мышь одновременно нажимает на квадратик и на уголок, после этого, не отпуская мышь, можно наблюдать забавные перемещения квадратика при ресайзе. Думаю, можно как-то отслеживать одновременность событий и реагировать только на одно из них.
                                                                    0
                                                                    Спасибо, занесено в баглист!
                                                                    +1
                                                                    Девочка очень красивая
                                                                      +2
                                                                      Для подавления выделения попробуйте в конце каждого mousemove ставить вот такую функцию, она универсальна для все браузеров, отбивает любые стандартные действия:

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

                                                                      Я тоже делал такую штуку для одного проекта. Только я не кртинку уменьшал, а кадр увеличивал. Самый главный промах и у вас и у меня — выделение с помошью осветляющего региона. А ведь по хорошему имеено эта часть идет на превьюшку, а значит нужно засветлять или затемнять все что находится вокруг.
                                                                        0
                                                                        ООО! Спасибо большое, попробую.
                                                                        Про подавление стандартного поведения знал, но не думал, что оно распространяется и на выделение.
                                                                        Насчет проблемы - ИМХО, скорость и безглючность важнее описанного недостатка.
                                                                          0
                                                                          Не всегда ;) Бывает и наоборот.
                                                                            0
                                                                            Ой, ей только event еше передавать нужно, я верен что вы и сами догадались, но я на всякий случай ;)
                                                                          +1
                                                                          Несколько лет назад делал подобную вещь (у меня двигался и ресайзился сам кроп). Код старый, уж строго не судите ;) Скоро я собираюсь эту вещь переписывать и модернизировать, а пока — просто как еще одинработающий пример...
                                                                          Версия в работе лежит вот тут.
                                                                          Выделение, у меня кстати блокировалось (на то время; в фф3 это уже не работает нормально), можете в принципе глянуть, там все было как-то просто...
                                                                            0
                                                                            На самом деле у вас один из самых лучших вариантов. Еще бы выделение было с помошью полупрозрачности, а не тупо цвет. Или просто обводка.
                                                                              0
                                                                              Ну просто этот вариант, в отличие от Y и jQ вариантов, продавался. Но, учитывая давность и срок (2 дня), внутри он далек от идеала, а руки всё не доходили доработать...
                                                                              <оффтоп>Я, как запущу "сайт себя" и проведу ревизию кода, выложу несколько хороших (имхо ;) ) штук...</оффтоп>
                                                                              Насчет "тупо цвет" не совсем понял — там сделан фильтр для ие и полупрозрачный пнг. Это не та полупрозрачность? ;) Впрочем, до кондиции это доводится легким изменением стиля.
                                                                                0
                                                                                Вместо png лучше для однородного фона использовать opacity, вот у меня например этот png не загрузился, и я увидел сплошной цвет :)
                                                                                  0
                                                                                  я знаю) это было давно, опера тогда еще не очень много умела, а прозрачность в фф была в виде -moz-opacity, и я не решился это использовать )
                                                                              0
                                                                              Да, с выделением в опере всё равно проблемы. А вот фаербаг довольно быстро досчитал количество ошибок до 1000 :)
                                                                              0
                                                                              Я не понял, а где здесь собственно кроп? Ресайз увидел, ну рамочка есть, да. А файла на исходе откропленного то нет.
                                                                                0
                                                                                посмотреть профиль bur адский человек, респект очередной раз!
                                                                                Пока по проблемам нечего сказать, фф2 (мак) работает отлично!
                                                                                  +1
                                                                                  Полезная штуковина.
                                                                                  Небольшая мелочь - на мой вкус уместней было бы полупрозрачностью приглушить то, что не попадет в кроп, а выделение наоборот оставить контрастным.
                                                                                  • UFO just landed and posted this here
                                                                                      0
                                                                                      Как-то всё глючит не по детски и ничего не работает :)
                                                                                      • UFO just landed and posted this here
                                                                                          0
                                                                                          Изображение скачет влево-вправо, и у него еще есть фантом :)
                                                                                          А то, что не ресайзит без серверной части, оно и понятно :)
                                                                                      0
                                                                                      Показанные примеры - не смог изменить размер.

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

                                                                                      Проще повторить идею на jQuery + jQuery UI (draggable + resizable + opacity), чем использовать код автора.
                                                                                        0
                                                                                        Кстати, зпа информацию о размере выделенной области в её краю - громадный респект. удобная фича.
                                                                                        0
                                                                                        Глюк в фаерфоксе. Если взятья очень близко к раю, а потом потянуть мышь к этому краю, захват как-бы «соскочит». Вы mousemove не на document сделали, что-ли?
                                                                                          0
                                                                                          Прошу прощения, оказывается в ФФ3б5 вообще каждое второе перемешение области выделения не работает, безотносительно места нажатия. Проверьте пожалуйста в ФФ3рс2 более внимательно, вдруг глюк все-же не в бетте.
                                                                                          0
                                                                                          Впечатляет. Пригодится. Спасибо.
                                                                                            0
                                                                                            Совсем недавно похожее реализовал: http://dmitry.baranovskiy.com/work/avata…
                                                                                              0
                                                                                              В коллекцию. Здесь уже был аналогичный скрипт.
                                                                                              Однако, Ваш глючит, после некоторых перемещений по onmove начинают сыпаться ошибки.
                                                                                                0
                                                                                                Так и не смог повторить ваш баг. Ну не глючит он у меня, хоть тресни. Какой браузер-то?
                                                                                              +1
                                                                                              в третьем примере X и Y кропа попутаны ;)
                                                                                                0
                                                                                                Спасибо, поправлю.
                                                                                                0
                                                                                                А поворот пожно реализовать на произвольный градус?
                                                                                                  0
                                                                                                  Вообще можно, но такой задачи не ставилось. Смотрите в сторону VML & Canvas.
                                                                                                    0
                                                                                                    гляну, спасибо.
                                                                                                • UFO just landed and posted this here
                                                                                                    0
                                                                                                    Я не совсем понял: фотография обязательно должна предварительно звгружаться на сервер или можно всю обработку делать локально на компе клиента, а на сервер загружать готовую фотографию после кропа и ресайза?
                                                                                                      0
                                                                                                      Непосредственное изменение размеров и масштаба изображения с получением новой картинки происходит на сервере. JavaScript может только отдать нужные координаты.
                                                                                                        0
                                                                                                        Поскольку юзеры убеждены, что 5-мегапиксельный фотик это вчерашний день, а 8 мегапикселей это вэригуд, а 16 - еще лучше, только денег нет, - размер джипегов, из которых они пытаются сделать аватар, нередко превышает 1 - 1,5 мегабайта. А на серваке эти монстры раскладываются по битам, для обработки, и занимают в несколько раз больший обьем. При большом количестве посетителей нагрузка на сервер получается несоизмерима с пользой такого сервиса. Проще надавать ссылок на бесплатные фоторедакторы, чтобы грузили готовые фотки приемлемого размера. Или найти плагин к браузеру, умеющий это делать.
                                                                                                      0
                                                                                                      Респект автору!
                                                                                                      Решился взяться за доделку. Да не буду убиенным:
                                                                                                      http://i-web.com.ua/fc-cropresize2.zip
                                                                                                        0
                                                                                                        в IE8b2 кроп уже непрозрачный, а в линуксовом FF3.0.1 перетаскивание работает через раз

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

                                                                                                        а так вещь полезная и лаконичная, одобрям-с :)
                                                                                                          0
                                                                                                          нашел тут я готовое решение на jquery+php
                                                                                                          www.sigel.ru/12-resajz_kartinki_crop_resize_s_php_i_jquery

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

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


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

                                                                                                              Only users with full accounts can post comments. Log in, please.