上傳和裁剪圖像，然後將其發送到服務器

是否有一些客戶端組件（jQuery的/瑞士法郎），將提供上傳和作物（用戶應該能夠選擇區域裁剪）的圖像瀏覽器，然後將裁剪後的圖像發送到服務器？上傳和裁剪圖像，然後將其發送到服務器

我在asp.net-MVC（如果不知道它的問題）

2010-04-29 Omu

Jcrop是快速而簡便的方法圖像裁剪功能添加到您的Web應用程序。它將典型jQuery插件的易用性與強大的跨平臺DHTML裁剪引擎相結合，忠實於熟悉的桌面圖形應用程序。

2010-04-29 08:28:59

我第二個這個。有關在MVC中使用它的教程，請參閱http://towardsnext.wordpress.com/2009/04/13/crop-image-in-aspnet-using-jcrop-jquery/。 – 2010-04-29 08:32:03

是的，jcrop適合剪裁，但是在裁剪之前必須上傳整個圖像，我想知道在將圖像發送到服務器之前是否會在客戶端裁剪圖像 – Omu 2010-04-29 08:34:29

裁剪客戶端需要一些類似Flash或Silverlight的插件（無法通過JavaScript實現）。 – 2010-04-29 12:38:23

Jcrop Image Plugin可能擅長顯示裁剪UI並獲取瀏覽器中的裁剪座標。但是，它實際上並不作物的形象。因此，裁剪過程是在服務器上完成的，這對服務器性能來說非常不利。

答案here引入Jcrop擴展，裁剪圖像中的瀏覽器和上傳的裁剪圖像到服務器。「它使用Jcrop插件來裁剪圖像，在HTML 5 canvas元素中繪製裁剪區域，將畫布轉換爲blob並通過AJAX將圖像文件上傳到服務器。」

最重要的部分是canvasToBlob函數，它將HTML 5 canvas元素轉換爲可以作爲圖像上傳到服務器的Blob類型。不幸的是，這種方法僅適用於AJAX，無法直接提交表單，因爲blob不能作爲輸入文件放入標準HTML表單元素中。實際上，我們很少使用表單在裁剪時直接提交圖像。

2014-10-14 00:19:59

好的工作指向正確的答案，但只是鏈接沒有你的貢獻不是一個答案更好的更新你的答案添加詳細信息，否則添加這個作爲評論問題和刪除這個答案 – Ram 2014-10-14 00:30:57

您需要將裁剪UI與上傳器結合起來才能完成此複雜任務。裁剪用戶界面負責顯示裁剪用戶界面並給出裁剪座標，上傳器作物調整圖像大小，將其轉換爲斑點並將其上傳到服務器。

裁剪UI很常見，但上傳器很難找到。我建議使用易於使用的裁剪UI ImgAreaSelect，這個簡單且可擴展但不是免費的Uploader。

2014-10-30 18:26:53

回答