用jQuery裁剪图像 [英] Image cropping with jquery

问题描述

我希望用户上传图像，然后将其裁切成设定的尺寸.我想发生的事情本质上是一个div，该div设置为特定的裁切大小和该框中的图像.然后，用户将能够滑动图像，并且该div中可见的内容就是图像将被裁剪到的内容.

I'm looking to have users upload an image and then it will be cropped to a set size. What I'd like to have happen is essentially a div that's set to the specific crop size and the image inside that box. The user would then be able to slide the image around and whatever was visible in that div is what the image would be cropped to.

我遇到的所有jquery插件都只是让用户将选择框移到整个图像上，而不是将图像移到选择框后面.这种事情是否存在，我是否刚刚错过了该插件?

All of the jquery plugins I've come across simply let the user move a selection box around the full image and not move the image behind the selection box. Does this sort of thing exist and have I just missed that plugin?

基本上就像Facebook中的缩略图编辑器一样，您可以在缩略图大小的框中向四周拖动图像.

Basically it would be like the thumbnail editor in Facebook where you drag your image around in the thumbnail-sized box.

推荐答案

您实际上并不需要插件.可以使用香草jQuery和CSS通过设置背景位置值来完成此操作.

You don't really need a plugin for that. This can be done by vanilla jQuery and CSS by setting the background-position value.

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

这篇关于用jQuery裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！