javascript - 客户端图像处理(裁剪)

Question

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

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

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

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

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

谢谢!

杰西

Answer 1

基本上我会这样做:

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

Here是一个很好的教程。

免责声明:我还没有对此进行测试，但我听说这种方式可行。

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