客户端图像处理（裁剪）

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 canvas裁剪图像，但是它涉及很多代码，请考虑使用Cropperjs，这是一个用于裁剪图像的纯JavaScript库。这里的client-side image cropping by cropperjs是工作示例。