在将图像发送到服务器之前上传并裁剪图像

Question

是否有一些客户端组件（jquery / swf）可以在浏览器中上传和裁剪（用户应该能够选择要裁剪的区域）图像，然后发送裁剪图像到服务器？

我在使用asp.net-mvc（不确定是否重要）

Answer 1

jcrop

Jcrop是向Web应用程序添加图像裁剪功能的快捷方式。它结合了典型jQuery插件的易用性和强大的跨平台DHTML裁剪引擎，忠实于熟悉的桌面图形应用程序。

Answer 2

Jcrop Image Plugin可能擅长显示裁剪UI并在浏览器中获取裁剪的坐标。但是，它实际上不会裁剪图像。因此，裁剪过程在服务器上完成，这对您的服务器性能非常不利。

答案here引入了一个Jcrop扩展，可​​以在浏览器中裁剪图像并上传 裁剪图像到服务器。 “它使用Jcrop插件来裁剪图像，在HTML 5 canvas元素中绘制裁剪区域，将画布转换为blob并通过AJAX将图像文件上传到服务器”。

最重要的部分是canvasToBlob函数，它将HTML 5 canvas元素转换为Blob类型，可以作为图像上传到服务器。遗憾的是，此方法仅适用于AJAX，无法直接提交表单，因为blob不能作为输入文件放在标准HTML表单元素中。实际上，我们很少使用表单在裁剪时直接提交图像。

Answer 3

您需要将裁剪UI与上传器结合使用才能完成此复杂任务。裁剪UI负责显示裁剪UI并提供裁剪坐标，以及上传裁剪和裁剪。调整图像大小，将其转换为blob并将其上传到服务器。

裁剪用户界面很常见，但上传器很难找到。我建议使用易于使用的裁剪用户界面ImgAreaSelect，这个Uploader简单易用，但不是免费的。