在浏览器上选择和裁剪图像

Question

我有一个问题。所以我想做一个这样做的网络应用程序：

1. 允许用户从其文件系统中选择图像
2. 使用裁剪工具，选择用户要裁剪的图像区域
3. 预览裁剪
4. 保存裁剪后的图像

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

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

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

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

那么有没有人能解决这些问题，或者知道另一种技术可以满足我需要的事情而不会出现上述任何问题？请让我知道。谢谢。

Answer 1

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

您可以在此处找到演示，文档和下载链接：Jquery自定义输入文件插件

你可以做这样的事情。标记：

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

文档准备就绪后：

 $('#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)
        }
    })
 });