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

Posted 2023-02-25

【中文标题】在将图像发送到服务器之前上传并裁剪图像[关闭]

【英文标题】：Upload and crop image before sending it to the server [closed]

【发布时间】：2010-04-29 08:27:53

【问题描述】：

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

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

【参考方案1】：

jcrop

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

【讨论】：

我赞成这个。有关在 MVC 中使用它的教程，请参阅 towardsnext.wordpress.com/2009/04/13/…。

是的 jcrop 很适合裁剪，但是你必须在裁剪之前上传整个图像，我想知道在将图像发送到服务器之前是否有东西会在客户端裁剪图像

裁剪客户端需要某种插件，例如 Flash 或 Silverlight（您无法通过 javascript 实现）。

@Dan Diplo 我对 Flash 没意见，有没有为此目的用 Flash 制作的东西？

@Omu - 看到这个帖子***.com/questions/2008836/…希望它有帮助？

【参考方案2】：

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

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

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

【讨论】：

好工作指向正确的答案，但没有您的贡献只是链接不是答案更好地更新您的答案以添加详细信息，或者将此添加为问题的评论并删除此答案

【参考方案3】：

您需要结合裁剪 UI 和上传器来完成这项复杂的任务。裁剪 UI 负责显示裁剪 UI 并给出裁剪坐标，上传者裁剪和调整图像大小，将其转换为 blob 并上传到服务器。

裁剪界面很常见，但上传者很难找到。我推荐易于使用的裁剪 UI ImgAreaSelect 和简单且可扩展但不是免费的 Uploader。