Question

我已广泛使用Jcrop，但我希望以与Facebook用于裁剪封面图像非常类似的方式裁剪图像。

所以，我希望div具有一定的固定大小，其中背景可以保存原始大小的可拖动图像，用户可以拖动并找到合适的可见区域进行裁剪。

据我所知，在JCrop中，原始图像具有固定大小，可拖动区域在其上移动，您想要裁剪。我只想要相反。要拖动的图像和要修复的选区。

有没有办法使用JCrop？

修改由于我已经有一段时间发布了答案，the other answer有更好的帮助。请检查出来

Answer 1

要在Facebook中裁剪图片（在区域内拖动），我强烈推荐使用Guillotine（demo）。

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

Answer 2

我一直在寻找这个，虽然我得到了另一个很棒的插件 - JWindowCrop

您也可以从repository获取插件。

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

以下是我如何匹配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>');

我没时间在插件中添加一个选项来执行此操作。

Answer 3

像facebook封面图片一样上传图片使用此插件facebook-style-cover-image-reposition

JCrop如何通过拖动div（如facebook封面）来裁剪图像

3 个答案: