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。够小吗？

Answer 2

我使用imgAreaSelect。这是一个很棒的工具，输入和输出非常简单......

详细说明：

您可以设置宽度，高度并将“resizable”选项设置为false以允许用户选择特定的方块（尽管通常我会给用户更多的自由并在选择不同大小时裁剪图像 - 仅执行方面比例。

当然，这是35Kb，可以缩小为＆lt; 14KB。如果你想要它更小，我建议你在缩小它之前去掉一些你不需要的功能。

Answer 3

有很多用于客户端裁剪的jQuery插件（jCrop，imgAreaSelect等）。也许您会发现以下博客文章有用。它描述了在与Javascript库集成时在服务器上实际裁剪的解决方案：

http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries

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

3 个答案: