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

Question

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

我在asp.net-mvc上(不确定是否重要)

Answer 1

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

是的jcrop适合裁剪,但你必须在裁剪之前上传整个图像,我想知道是否有什么东西会在客户端将图像发送到服务器之前裁剪图像 (5认同)
我是第二个.有关在MVC中使用它的教程,请参阅http://towardsnext.wordpress.com/2009/04/13/crop-image-in-aspnet-using-jcrop-jquery/. (3认同)

Answer 2

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

这里的答案介绍了一个Jcrop扩展,它在浏览器中裁剪图像并将裁剪后的图像上传到服务器."它使用Jcrop插件来裁剪图像,在HTML 5 canvas元素中绘制裁剪区域,将画布转换为blob并通过AJAX将图像文件上传到服务器".

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