JCrop Как обрезать изображение, перетаскивая его за div (например, обложка facebook)

Я широко использовал Jcrop, но хочу обрезать изображение так же, как Facebook использует для обрезка обложки.

Итак, я хочу, чтобы div имел некоторый фиксированный размер, в котором фон должен содержать перетаскиваемое изображение исходного размера, которое пользователь перетаскивает и находит подходящую видимую область для обрезки.

Из того, что я узнал, в JCrop исходное изображение имеет фиксированный размер, и перетаскиваемая область перемещается по нему, которую вы хотите обрезать. Я просто хочу обратного. Изображение, которое нужно перетащить, и область выделения, которую нужно зафиксировать.

Есть ли способ сделать это с помощью JCrop?

РЕДАКТИРОВАТЬ: Я уже давно опубликовал ответ: другой ответ помогает гораздо лучше. Пожалуйста, проверьте это


image jquery crop jcrop
person ashutosh    schedule 02.10.2013    source источник
comment
Я хотел бы иметь такое решение @ashutosh, вам удалось его решить?   -  person ademg    schedule 17.11.2013
comment
@ademg: есть какое-то решение, пожалуйста, добавьте сюда, если у вас есть   -  person Prasanth Bendra    schedule 20.11.2013
comment
@ashutosh: есть какое-то решение, пожалуйста, добавьте сюда, если у вас есть   -  person Prasanth Bendra    schedule 20.11.2013
comment
хорошо, так как я не могу получить хороших ответов, сейчас я отвечу, как я решил свою проблему   -  person ashutosh    schedule 21.11.2013

Ответы (3)


arrow_upward
10
arrow_downward

Чтобы обрезать изображения, как в Facebook (перетаскивание в пределах области), я настоятельно рекомендую использовать гильотину (демо).

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

person 404    schedule 03.08.2014

arrow_upward
6
arrow_downward

Я искал это некоторое время, пока у меня есть еще один отличный плагин - JWindowCrop

Также вы можете получить плагин из репозитория.

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

Вот как я сделал это, чтобы соответствовать области обрезки обложки facebook:

HTML:

<img id="target" class="crop" alt="" src="images/sample-cover.jpg" />

JavaScript:

$('.crop').jWindowCrop({
                targetWidth: 851, //Width of facebook cover division
                targetHeight: 315, //Height of cover division
                loadingText: 'Your Cover is uploading....',
                onChange: function(result) {
                    console.log("separation from left- "+result.cropX);
                    console.log("separation from top- "+result.cropY);
                    console.log("width- "+result.cropW);
                    console.log("Height- "+result.cropH);
                }
            });

Вы можете изменить внутреннюю область, если вас не устраивает плагин.

ПРИМЕЧАНИЕ. Поскольку ширина обложки facebook составляет только 851 пиксель, загруженное изображение и разделение кадра должны иметь одинаковую ширину, то есть 851 пиксель.

Я подготовил здесь ДЕМО

РЕДАКТИРОВАТЬ: На всякий случай, если вы заметили текст «Перетащите, чтобы изменить положение» в области кадрирования (вверху слева) при перетаскивании изображения внутри обложки, вы можете упомянуть свой текст, изменив эту строку. плагина:

 Line:34-   base.$frame.append('<div class="jwc_controls" style="position:relative;display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span class="dragger">Drag to reposition</span></div>');

У меня не было времени добавить в плагин соответствующую опцию.

person ashutosh    schedule 21.11.2013
comment
Этот плагин отличный! Вы нашли способ использовать его с формой? Мне нужно обрезать изображение перед загрузкой, и я также хочу сохранить исходную версию. Я пытаюсь изменить загрузчик файлов начальной загрузки, чтобы отобразить два окна предварительного просмотра, одно из которых с jwindowscrop. - person Roberto Pezzali; 20.12.2013
comment
вы можете показать мне скрипку или пример того, как вы ее используете? Может быть, тогда я смогу предложить некоторые изменения. Из того, что вы сказали, я предлагаю вам использовать метод jquery on для запуска функции jwindowcrop для включения обрезки в области предварительного просмотра. - person ashutosh; 20.12.2013
comment
ДЕМО СТРАНИЦА вы можете увидеть мою демонстрационную страницу. Я не знаю, как вызвать функцию jWindowCrop при загрузке. Если я запускаю его с помощью консоли, он работает! - person Roberto Pezzali; 20.12.2013
comment
Спасибо за предложение .. Отличный плагин. - person Muhammad Tahir; 19.01.2016

arrow_upward
1
arrow_downward

загрузить изображение, например изображение обложки facebook, используйте этот плагин facebook-style-cover-image-reposition

person Satya Prakash    schedule 03.03.2015