使用 jquery 进行图像裁剪答案

【问题标题】：Image cropping with jquery使用 jquery 进行图像裁剪
【发布时间】：2012-04-22 02:27:40
【问题描述】：

我希望用户上传图片，然后将其裁剪为设定的尺寸。我想要发生的基本上是一个设置为特定裁剪大小的 div 和该框内的图像。然后，用户就可以四处滑动图像，该 div 中可见的内容就是图像将被裁剪的内容。

我遇到的所有 jquery 插件都只是让用户在整个图像周围移动一个选择框，而不是将图像移动到选择框后面。这种事情存在吗，我只是错过了那个插件吗？

基本上它就像 Facebook 中的缩略图编辑器，您可以在其中将图像拖到缩略图大小的框中。

【问题讨论】：

Cropper.js 有一个viewing mode，其中裁剪框不能超过画布的大小。您可以设置裁剪大小，然后将图像拖到裁剪框后面的画布上。请参阅demo 并尝试查看模式 #1 (VM1)。
另见Croppie。

标签： php jquery ajax image crop

【解决方案1】：

您实际上并不需要插件。这可以通过 vanilla jQuery 和 CSS 通过设置 background-position 值来完成。

<div id="CroppedImageDiv"></div>
<script type="text/javascript">
    function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) {
        var bgPos = cropStartX + "px " + cropStartY + "px";
        $('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos);
        $('#CroppedImageDiv').css('background-url', imgUrl);
    }
</script>

【讨论】：

这不会让我能够拖动图像，对吧？这只是为了确定最终的图像裁剪？抱歉，我是 javascript/jquery 初学者。
是的，此代码只是在 DIV 中显示您最终裁剪的图像。对于实际的裁剪操作，您可以查看 JCrop 代码以获得灵感，但对于 jQuery 初学者来说可能具有挑战性......

【解决方案2】：

我会推荐“断头台”：http://github.com/matiasgagliano/guillotine

这是一个 jQuery 插件，可以满足您的要求，它还可以进行旋转和缩放。

它支持触摸设备并且响应迅速。

查看演示：http://matiasgagliano.github.io/guillotine

【讨论】：

【解决方案3】：

您可以使用 JCrop 插件。

Jcrop Plugin

【讨论】：

谢谢，但 jcrop 插件不允许您在包含的选择框中移动图像。