在服务器端裁剪与在客户端裁剪并发送base64字符串？

Question

我想允许我的用户上传特定大小限制的图片，因此需要进行裁剪。现在我找到了两个插件，一个是jcrop，另一个是cropper; Jcrop使用服务器端方法裁剪图像。以下是他们的文档片段：

  

在Web应用程序中裁剪功能的典型工作流程   看起来像这样：

     

上传或选择要裁剪的图像。   显示带有裁剪界面的页面。   捕获选定的坐标作为表单值在表单提交上。   服务器执行图像裁剪。生成的图像被保存，替换，更新，   显示等

cropper使用HTML5 canvas在客户端裁剪图片并将base64字符串发送到服务器，服务器可将其解码为图像并保存。

我个人更喜欢第二种方法，因为我可以在json内发送字符串，帮助我避免multipart form data内容类型，我可以继续使用application/json内容类型。 然而，在阅读jcrop方法后，我担心客户端裁剪技术的性能。哪种方法可以提供更好的性能，并涵盖移动设备？每种方法有哪些限制，如最大文件大小等。

Answer 1

我不能谈论具体的实现性能或文件大小限制，但我相当确定这里所需的方法是 客户端和服务器端裁剪，因此实现：

1. 如果客户能够，将其裁剪为客户端
2. 客户端向服务器发送任何内容（如果能够裁剪，则裁剪，否则无法裁剪）
3. 服务器会检查收到的内容。如果尺寸大于接受尺寸，请将其裁剪为服务器端。

这是因为即使您决定仅实施客户端，如果您相信您永远不会收到来自用户的不合规数据，那将是一个傻瓜。既然你被生活中的事实迫使无论如何都要进行服务器端验证，那么这是一个透明地裁剪大图像的绝佳机会，无论客户的能力如何，都能确保合规。

我不担心客户端性能。发送图片时1或2秒的无响应不会杀死任何人。

关于最大文件大小，这也不是此方法中的问题，因为您确保客户端发送它可以发送的较小版本。如果它无法裁剪且图像太大，则无论如何都无法将其发送给您。

Answer 2

我们不能信任客户端发送到服务器的裁剪图像的blob数据，因此最好只从客户端获取值并从双方验证并尽可能在服务器端进行处理。