我希望让用户上传图像,然后将其裁剪为设定的大小。我希望发生的本质上是一个设置为特定裁剪大小和该框中图像的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插件