Javascript 在浏览器上选择并裁剪图像

我有个问题。因此，我想制作一个web应用程序来实现以下功能：

允许用户从其文件系统中选择图像

使用裁剪工具，选择用户希望裁剪的图像区域

预览作物

保存裁剪后的图像

我尝试了两种方法：第一种是使用HTML5画布。经过大量的欺骗，我能够选择一个图像，裁剪它（裁剪工具坐标被保存，图像被服务器端处理），预览它并提交它

但是如果我选择了一个图像，裁剪它，然后选择另一个图像并尝试裁剪它，我就会遇到问题。以前的图像选择与新的图像选择不一致

第二种方法是使用JCrop。使用他们网站上的两个示例，我可以使用裁剪工具选择一个区域，实时预览裁剪，并保存裁剪工具坐标

但这里的问题是，我不能使用用户上传的图像；图像url硬编码在img标记中。当我尝试实现一个用户选择的解决方案时，图像从未出现

---

那么，有没有人有解决这些问题的方法，或者有没有人知道另一种技术可以在没有上述任何问题的情况下满足我的需要？请让我知道。多谢各位

我开发了一个Jquery插件，它可以完全满足您的需要：它可以选择图像（或拖放图像），让您预览图像并预览裁剪区域，更改所选图像并上传图像。对于裁剪图像，我的插件包括JCrop。 此外，它还验证文件（最大KB、扩展名、图像最小大小等），允许您选择多个文件和样式按钮。它接受多种选择

您可以在此处找到演示、文档和下载链接：

你可以这样做。标记：

 <form id="your-form" action="process_form.php">
   <input id="your-input-file" name="your-input-file">
   <input type="submit" value="Upload file">
 </form>

---

假设我选择了一个图像，但随后切换到另一个图像。裁剪新图像后，裁剪的坐标将默认为原始坐标，并且不允许更改。我最喜欢的是ImageCropper（这里是live demo:）我认为它可能适合您的需要。Hi Angel，有没有一种不用php的方法？我想使用Java作为服务器part@SantoshKantharaj，对不起，我在Java方面帮不了你。我希望你能找到解决办法！

 $('#your-input-file').customFile({
    type : 'image',
    image : {
       crop : true,
       cropSize: [300,200], // width and height of result
       maxSize : [1080,720] // if you want to set up a maximum value for original images
    },
    maxKBperFile : 500,
    multiple: false // when you select or drop a new image, this one replaces previous one

    //More options...

 });

 //And upload form:
 $('#your-form').submit(function(e){
    e.preventDefault();
    $.customFile.ajax('#your-form', {
        success : function(response){
             console.log(response)
        }
    })
 });