使用 jquery 进行图像裁剪


Image cropping with jquery

我希望让用户上传图像,然后将其裁剪为设定的大小。我希望发生的本质上是一个设置为特定裁剪大小和该框中图像的div。然后,用户将能够滑动图像,并且该div中可见的任何内容都是图像将被裁剪的内容。

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

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

你真的不需要插件。这可以通过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>

我会推荐"断头台":http://github.com/matiasgagliano/guillotine

这是一个jQuery插件,可以按照您的要求进行操作,还可以进行旋转和缩放。

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

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

您可以使用 JCrop 插件。

Jcrop插件