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

Question

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

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

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

但如果我选择了一张图片，将其裁剪，然后选择另一张图片并尝试裁剪，我就会遇到问题。之前的图像选择与新的图像混淆了。

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

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

那么，有没有人可以解决这些问题，或者是否知道另一种技术可以满足我的需求，而不会出现上述任何问题？请告诉我。谢谢你。

Answer 1

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

您可以在此处找到 DEMO、文档和下载链接：Jquery Custom Input File Plugin

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

 <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)
        }
    })
 });