Question

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

允许用户从他的文件系统中选择图像
使用裁剪工具，选择用户想裁剪的图像区域
预览裁剪
保存裁剪后的图片

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

但是如果我选择了一个图像，裁剪它，然后选择另一个图像并尝试裁剪它，我就遇到了问题。之前的图像选择正在弄乱新的图像。

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

但问题在于我无法使用用户上传的图片;图像网址在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)
        }
    })
 });

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

1 个答案: