是否有类似Facebook的图像裁剪的jQuery图像裁剪插件？ [英] Is there a jQuery image cropping plugin similar to Facebook's image crop?

问题描述

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

I know there are thousands of jQuery plugins for image crop, but the one I need is similar to Facebook's image crop: a draggable fixed size square over a image, or a draggable image under a fixed size square.

我认为它有一个简单优雅的代码，而不是我在任何地方都能找到的10k-50k图像处理框架。

I think there's a simple elegant code for it, instead of a 10k-50k framework for image manipulation that I'm finding everywhere.

推荐答案

我刚刚为您构建了一个如何使用jQuery做的快速示例： http://jsfiddle.net/gCqJ4/ 这不是太难，你可以建立我的榜样。许可证是麻省理工学院。

I just built you a quick example of how to do it with jQuery: http://jsfiddle.net/gCqJ4/ It's not too hard and you can build off of my example. License is MIT.

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

There is a fundamental assumption being made here. First, your image is expected to already have been uploaded; this is just the crop part. Second, the image has a data-id attribute which specified the id of the image that the server can use.

我将在下面解释一下JS：

I'll explain the JS a bit below:

第一部分是典型的jQuery插件声明：

First part is your typical jQuery plugin declaration:

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

然后我们采取设置的可选参数，带有一些合理的默认值（成功是您处理成功数据提交的匿名函数）：

Then we take an optional argument of settings, with some sane defaults (success being your anonymous function for handling successful data submissions):

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

下一步是基本的初始头寸计算。

Next is just basic initial position calculation.

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

我们将图像包装在一个容器中，该容器可以设置样式并用作可拖动裁剪器的父容器。

We wrap the image in a container that can be styled and used as the parent containment for the draggable cropper.

        $(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'/>");

并将其绑定到服务以接收裁剪的帖子：

And bind it to a service to receive posts for the cropping:

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

As a final note, the plugin itself is only 1.61 KB. Small enough?

这篇关于是否有类似Facebook的图像裁剪的jQuery图像裁剪插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！