我希望用户上传图片,然后将其裁剪为设定的尺寸。我想要发生的基本上是一个设置为特定裁剪大小的 div 和该框内的图像。然后,用户将能够四处滑动图像,该 div 中可见的任何内容都是图像将被裁剪的内容。
我遇到的所有 jquery 插件都只是让用户在整个图像周围移动一个选择框,而不是将图像移动到选择框后面。这种事情是否存在,我只是错过了那个插件吗?
基本上,它就像 Facebook 中的缩略图编辑器,您可以在其中将图像拖到缩略图大小的框中。
我会推荐“断头台”:http: //github.com/matiasgagliano/guillotine
这是一个 jQuery 插件,可以满足您的要求,它还可以进行旋转和缩放。
它支持触摸设备并且反应灵敏。
查看演示: http: //matiasgagliano.github.io/guillotine
你真的不需要插件。这可以通过 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>
您可以使用 JCrop 插件。