Html 在将图像发送到服务器之前上传和裁剪图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2735786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upload and crop image before sending it to the server
提问by Omu
Is there some client components (jquery/swf) that will give the possibility to upload and crop(user should be able to select the area to crop) an image in the browser and then send the cropped image to the server?
是否有一些客户端组件（jquery/swf）可以在浏览器中上传和裁剪（用户应该能够选择要裁剪的区域）图像，然后将裁剪后的图像发送到服务器？
I'm on asp.net-mvc (not sure if it matters)
我在 asp.net-mvc 上（不确定是否重要）
回答by CD..
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Jcrop 是向您的 Web 应用程序添加图像裁剪功能的快速简便的方法。它结合了典型 jQuery 插件的易用性和强大的跨平台 DHTML 裁剪引擎，忠实于熟悉的桌面图形应用程序。
回答by Omu
The Jcrop Image Plugin might be good at displaying the cropping UI and getting the cropped coordinates in the browser. However, it actually doesn't cropthe image. Therefore, the cropping process is done on the server, which is pretty bad for your server performance.
Jcrop Image Plugin 可能擅长在浏览器中显示裁剪 UI 和获取裁剪坐标。但是，它实际上并没有裁剪图像。因此，裁剪过程是在服务器上完成的，这对您的服务器性能非常不利。
The answer hereintroduces a Jcrop extension which crops the image in the browser and uploads the croppedimage to the server. "It uses Jcrop plugin to crop images, draws the cropped area in the HTML 5 canvas element, converts the canvas to a blob and uploads the image file to the server by AJAX".
这里的答案介绍了一个 Jcrop 扩展，它在浏览器中裁剪图像并将裁剪后的图像上传到服务器。“它使用 Jcrop 插件来裁剪图像，在 HTML 5 画布元素中绘制裁剪区域，将画布转换为 blob，并通过 AJAX 将图像文件上传到服务器”。
The most important part is the canvasToBlob function which converts the HTML 5 canvas element to a Blob type which can be uploaded to the server as images. Unfortunately, this method solely works in AJAX and can't submit a form directly, because the blob can't be put in the standard HTML form element as an input file. In reality, we seldom use form to submit images directly when cropping them.
最重要的部分是 canvasToBlob 函数，它将 HTML 5 画布元素转换为 Blob 类型，该类型可以作为图像上传到服务器。不幸的是，这种方法只适用于 AJAX，不能直接提交表单，因为 blob 不能作为输入文件放入标准 HTML 表单元素中。实际上，我们在裁剪图像时很少使用表单直接提交图像。
回答by Omu
You need to combine a cropping UI with a uploader to complete this complex task. The cropping UI is responsible for displaying the cropping UI and give the cropping coordinates, and the uploader crops & resizes the image, convert it to a blob and upload it to a server.
您需要将裁剪 UI 与上传器结合起来才能完成这项复杂的任务。裁剪 UI 负责显示裁剪 UI 并给出裁剪坐标，上传器裁剪和调整图像大小，将其转换为 blob 并上传到服务器。
The cropping UI is common, but the uploader is hard to find. I recommend the cropping UI ImgAreaSelectwhich is easy to use and this Uploaderwhich is simple and extensible but it is not free.
裁剪UI很常见，但上传者很难找到。我推荐易于使用的裁剪 UI ImgAreaSelect和简单且可扩展但不是免费的上传器。
