Javascript 是否有类似于 Facebook 的图像裁剪的 jQuery 图像裁剪插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7850673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a jQuery image cropping plugin similar to Facebook's image crop?
提问by
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.
我知道有数千个用于图像裁剪的 jQuery 插件，但我需要的插件类似于 Facebook 的图像裁剪：图像上方的可拖动固定大小方块，或固定大小方块下方的可拖动图像。
I think there's a simple elegant code for it, instead of a 10k-50k framework for image manipulation that I'm finding everywhere.
我认为它有一个简单优雅的代码，而不是我随处可见的用于图像处理的 10k-50k 框架。
采纳答案by doctorless
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.
我刚刚为您构建了一个如何使用 jQuery 进行操作的快速示例：http: //jsfiddle.net/gCqJ4/这并不难，您可以根据我的示例进行构建。许可证是麻省理工学院。
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.
这里有一个基本假设。首先，您的图片应该已经上传；这只是作物部分。其次，图像有一个 data-id 属性，它指定了服务器可以使用的图像的 id。
I'll explain the JS a bit below:
我将在下面解释一下 JS：
First part is your typical jQuery plugin declaration:
第一部分是典型的 jQuery 插件声明：
(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;' />");
This is (obviously) the cropper.
这是（显然）裁剪器。
var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");
Place it before the image:
将它放在图像之前：
$(this).before(cropper);
Create a basic save button:
创建一个基本的保存按钮：
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);
End of the typical plugin declaration:
典型插件声明的结尾：
};
})(jQuery);
Call it:
称它为：
$(".croppable").croppable();
As a final note, the plugin itself is only 1.61 KB. Small enough?
最后要注意的是，插件本身只有 1.61 KB。够小吗？
回答by Timbo
I use imgAreaSelect. It's a great tool and very easy inputs and outputs...
我使用imgAreaSelect。这是一个很棒的工具，非常简单的输入和输出......
To elaborate:
详细说明：
You can set the width, height and set the "resizable" option to false to achieve allowing the user to select a specific square (although normally I give users more freedom and crop the image when they select a different size - only enforcing the aspect ration.
您可以设置宽度、高度并将“可调整大小”选项设置为 false 以实现允许用户选择特定正方形（尽管通常我会给用户更多自由并在他们选择不同大小时裁剪图像 - 仅强制执行纵横比.
Granted, this is 35Kb which can be minified to < 14kb. If you want it smaller I'd suggest stripping out some of the functions you don't need before you minify it.
当然，这是 35Kb，可以缩小到 < 14kb。如果你想要它更小，我建议你在缩小它之前去掉一些你不需要的功能。
回答by Cloudinary
There are plenty jQuery plugins for client-side cropping (jCrop, imgAreaSelect, etc.). Maybe you will find the following blog post useful. It describes a solution for the actual cropping on the server while integrating with the Javascript libraries:
有很多用于客户端裁剪的 jQuery 插件（jCrop、imgAreaSelect 等）。也许您会发现以下博客文章很有用。它描述了在与 Javascript 库集成的同时在服务器上进行实际裁剪的解决方案：
http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries
http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries
