Есть ли плагин подкачки изображения jQuery, похожий на обложку изображения Facebook?

Ответ 1

Я просто построил вам быстрый пример того, как это сделать с помощью jQuery: http://jsfiddle.net/gCqJ4/ Это не слишком сложно, и вы можете построить мой пример. Лицензия - MIT.

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

Я объясню JS немного ниже:

Первая часть - это ваше типичное объявление плагина jQuery:

(function($) {
    $.fn.croppable = function(settings) {

Затем мы берем необязательный аргумент настроек с некоторыми стандартными значениями по умолчанию (успех является вашей анонимной функцией для обработки успешных представлений данных):

        settings = settings || {
            square: 50,
            default: 'middle',
            id: $(this).data("id"),
            success: null
        };

Далее - это просто базовый расчет начального положения.

        var position = {
            x: settings.default == 'middle' ? ($(this).width() / 2) - (settings.square / 2) : 0 ,
            y: settings.default == 'middle' ? ($(this).height() / 2) - (settings.square / 2) : 0
        };

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

        $(this).wrap("<div class='croppable-container' style='position: relative;' />");

Это (очевидно) обрезчик.

        var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");

Поместите его перед изображением:

        $(this).before(cropper);

Создайте базовую кнопку сохранения:

        var save = $("<input type='button' value='Crop Selection'/>");

И привяжите его к службе, чтобы получать сообщения для обрезки:

        save.click(function () {
           $.post("/your/service/location",
                  {
                      img: id,
                      x: cropper.position().left,
                      y: cropper.position().top,
                      height: settings.square
                  },
                  function (data) {
                      if (settings.success != null) {
                          settings.success(data);
                      }
                  }
            );
        });

        $(this).parent().width($(this).width());
        $(this).parent().height($(this).height());
        cropper.draggable({containment: "parent"});

        $(this).parent().after(save);

Конец типичного объявления плагина:

    };
})(jQuery);

Назовите его:

$(".croppable").croppable();

Как последнее замечание, сам плагин составляет всего 1,61 КБ. Достаточно ли достаточно?

Ответ 2

Я использую imgAreaSelect. Это отличный инструмент и очень простые входы и выходы...

Разработать:

Вы можете установить ширину, высоту и установить для параметра "resizable" значение false, чтобы позволить пользователю выбрать конкретный квадрат (хотя обычно я предоставляю пользователям больше свободы и обрезает изображение, когда они выбирают другой размер - только для обеспечения соблюдения аспектный рацион.

Конечно, это 35Kb, которое может быть уменьшено до < 14kb. Если вы хотите его уменьшить, я бы предложил удалить некоторые из функций, которые вам не нужны, прежде чем вы его уменьшите.

Ответ 3

Существует много плагинов jQuery для обрезки на стороне клиента (jCrop, imgAreaSelect и т.д.). Возможно, вы найдете следующее сообщение в блоге полезным. Он описывает решение для фактического обрезки на сервере при интеграции с библиотеками Javascript:

http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries