是否有类似Facebook的图像裁剪的jQuery图像裁剪插件？

Question

我知道有数以千计的jQuery插件用于图像裁剪,但我需要的是类似于Facebook的图像裁剪:图像上的可拖动固定尺寸正方形,或固定尺寸正方形下的可拖动图像.

我认为它有一个简单优雅的代码,而不是一个10k-50k的图像处理框架,我到处都找到它.

Answer 1

我刚刚为你建立了一个如何用jQuery做的快速示例:http://jsfiddle.net/gCqJ4/这不是太难,你可以建立我的例子.许可是麻省理工学院.

这里有一个基本的假设.首先,您的图像预计已经上传; 这只是作物的一部分.其次,图像具有data-id属性,该属性指定了服务器可以使用的图像的id.

我将在下面解释一下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 KB.够小吗？