Question

我希望用户上传图片然后将其裁剪为设定尺寸。我想要发生的事实上是一个div，它被设置为特定的裁剪尺寸和该框内的图像。然后，用户可以滑动图像，并且该div中可见的任何内容都是图像被裁剪到的位置。

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

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

Answer 1

你真的不需要插件。这可以通过设置背景位置值来通过vanilla jQuery和CSS来完成。

<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>

Answer 2

您可以使用JCrop插件。

Jcrop Plugin

Answer 3

我会推荐＆＃34;断头台＆＃34;：http://github.com/matiasgagliano/guillotine

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

它支持触控设备及其响应。

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

使用jquery进行图像裁剪

3 个答案: