在服務器端裁剪與在客戶端裁剪並發送base64字符串？

Question

我想允許我的用戶上傳具有特定尺寸限制的圖像，因此需要裁剪。 現在我發現了兩個插件，一個是jcrop ，另一個是種植者 ; Jcrop使用服務器端方法來裁剪圖像。 這是他們的文檔的片段：

Web應用程序中的裁剪功能的典型工作流程如下：

上傳或選擇要裁剪的圖像。 顯示帶有裁剪界面的頁面。 在表單提交時將選定的坐標捕獲為表單值。 服務器執行圖像裁剪。 結果圖像被保存，替換，更新，顯示等

雖然cropper使用HTML5 canvas上的客戶端裁剪圖像和發送base64字符串所在服務器的服務器可以為圖像對其進行解碼並保存。

我個人更喜歡第二種方法，因為我可以在json發送字符串，從而避免出現multipart form data內容類型，因此我可以繼續使用application/json內容類型。 但是，在閱讀了jcrop方法之后，我擔心客戶端裁剪技術的性能。 哪種方法可以提供更好的性能並覆蓋移動設備？ 每種方法（例如最大文件大小等）有什么限制？

Answer 1

我無法談論具體的實現性能或文件大小限制，但是我可以肯定，這里所需的方法是同時實現客戶端和服務器端裁剪：

1. 如果客戶端能夠，請在客戶端裁剪
2. 客戶端將收到的所有內容發送到服務器（如果可以裁剪，則裁剪，否則取消裁剪）
3. 服務器檢查收到的內容。 如果尺寸大於可接受的尺寸，則在服務器端進行裁剪。

這是因為，即使您決定僅實現客戶端，也要相信自己將永遠不會從用戶那里收到不合規的數據，這是一個傻瓜。 由於生活中的事實迫使您必須進行服務器端驗證，因此這是透明裁剪大圖像的絕佳機會，無論客戶端的功能如何，都能確保合規性。

我不會擔心客戶端性能。 發送圖片后1或2秒鍾的無響應狀態不會殺死任何人。

關於最大文件大小，在這種方法中也不是問題，因為您確保客戶端發送了可以發送的較小版本。 如果無法裁切並且圖像太大，則無論如何都無法將其發送給您。

Answer 2

我們不能信任客戶端發送到服務器的裁剪圖像的Blob數據，因此始終最好僅從客戶端獲取值，並從雙方進行驗證並盡可能在服務器端進行處理。