Javascript图像上传器

Question

如何使用裁剪实用程序在javascript中实现图像上传器。你如何通过AJAX提交图像文件？解决方案跨域兼容吗？

Answer 1

要实现具有裁剪功能的图像上传窗口小部件，您必须：

1. 将图像上传到服务器从AJAX应用程序上传文件本身就是一个主题。最好从许多现有的AJAX文件上传小部件之一开始。

2. 将图像存储在服务器上将图像上传到服务器后，必须将图像URL传递给裁剪小部件。

3. 指定裁剪区域使用手边的图像网址，您可以编写一个小裁剪小部件，可以定义图像的裁剪区域。

4. 在服务器上裁剪图像在用户定义裁剪区域后，必须使用AJAX调用将裁剪数据发送到服务器。在服务器上，必须使用众多图像处理工具之一（例如ImageMagick）裁剪图像。

Answer 2

如果您使用的是jQuery，可以查看jCrop插件。

Answer 3

要回答问题的最后部分 - 您无法使用XmlHttpRequest上传文件，因此“纯AJAX”在此处不匹配。 你能做的是

<FORM method="post" enctype="multipart/form-data" 
     action="serverscript.cgi" target="hiddenframe>
 <input type="file"....
</FORM>
<iframe id="hiddenframe" name="hiddenframe" style="display:none"></iframe>

然后，您必须在iframe中捕获文档的“onload”事件，以了解文档何时在那里。

Answer 4

如果你想使用Prototype，你可能会对jsCropperUI插件感兴趣。它有很多功能，而且代码非常整洁。

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/