8

我已经广泛使用了Jcrop，但我想以与 Facebook 用于裁剪其封面图像的方式非常相似的方式裁剪图像。

因此，我希望 div 具有某个固定大小，其中背景保存其原始大小的可拖动图像，用户拖动该图像并找到要裁剪的合适可见区域。

据我所知，在 JCrop 中，原始图像的大小是固定的，可拖动的区域会在它上面移动，你想要裁剪它。我只是想要相反的。要拖动的图像和要固定的选择区域。

有没有办法使用 JCrop 来做到这一点？

编辑： 由于我发布答案已经有一段时间了，所以另一个答案会以更好的方式提供帮助。请检查一下

4

3 回答 3

10

要在 Facebook 中裁剪图像（在一个区域内拖动），我强烈建议使用Guillotine（演示）。

这是一个非常轻量级的插件，允许裁剪、缩放和旋转图像。它还具有触摸支持并且响应迅速（流畅）。它非常适合 Facebook 之类的裁剪，而且设置起来非常容易。

于 2014-08-03T19:49:29.540 回答
6

我已经搜索了一段时间，虽然我得到了另一个很棒的插件- JWindowCrop

您也可以从存储库中获取插件。

插件非常简单，您可以根据需要轻松修改它，这是有益的。

以下是我如何匹配 facebook 封面的裁剪区域：

HTML：

<img id="target" class="crop" alt="" src="images/sample-cover.jpg" />

JavaScript：

$('.crop').jWindowCrop({
                targetWidth: 851, //Width of facebook cover division
                targetHeight: 315, //Height of cover division
                loadingText: 'Your Cover is uploading....',
                onChange: function(result) {
                    console.log("separation from left- "+result.cropX);
                    console.log("separation from top- "+result.cropY);
                    console.log("width- "+result.cropW);
                    console.log("Height- "+result.cropH);
                }
            });

如果您对插件不满意，可以修改内部区域。

注意：由于 facebook 封面只有 851px 的宽度，所以上传的图像和裁剪器必须是相同的宽度，即 851px。

我这里准备了一个DEMO

编辑： 以防万一您在将图像拖动到封面内时注意到裁剪区域（左上角）中的文本“拖动以重新定位”，您可以通过更改此插件行来提及您自己的文本：

 Line:34-   base.$frame.append('<div class="jwc_controls" style="position:relative;display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span class="dragger">Drag to reposition</span></div>');

我没有时间在插件中添加一个选项来这样做。

于 2013-11-21T17:02:48.400 回答
1

上传图片，如 facebook 封面图片使用这个插件 facebook-style-cover-image-reposition

于 2015-03-03T06:38:53.173 回答