客户端图像处理（裁剪）

Question

我正在构建一个使用 Parse 作为后端的 Web 应用程序。

注册过程的一部分涉及用户上传和裁剪图片，然后我将其传递到我的数据库（图片是用户个人资料的一部分，类似于您在 Twitter 上所做的）。

我已经弄清楚了上传部分（浏览器和数据库），但我对允许用户操作图像没有信心。

大多数解决方案涉及使用 jCrop 来获得类似于示例 here 的结果（尽管没有 PHP）。

鉴于我正在使用 Parse，是否有更好的客户端解决方案？解决方案看起来如何？

谢谢！

杰西

Answer 1

基本上我会这样：

1. 将您的图像加载到<canvas>
2. 裁剪图像：http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
3. 保存画布中的图像：http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Here 是一个很好的教程。

免责声明：我尚未对此进行测试，但我听说这种方式有效。

也可以使用background-size:cover; 或background-size:contain; 来解决令人讨厌的维度问题。

Answer 2

您可以使用 HTML 画布裁剪图像，但它涉及大量代码，请考虑使用 Cropperjs，它是用于裁剪图像的纯 javascript 库。这里client-side image cropping by cropperjs 是工作示例。