客户端图像处理（裁剪）

Posted 2023-02-25

【中文标题】客户端图像处理（裁剪）

【英文标题】：Client-Side Image Manipulation (Cropping)

【发布时间】：2014-10-28 07:53:03

【问题描述】：

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

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

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

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

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

谢谢！

杰西

【问题讨论】：

为什么不使用 jCrop？据我所知，这是一个客户端解决方案......编辑：啊，我自己得到它，它只计算裁剪而不执行它。

【参考方案1】：

基本上我会这样：

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

Here 是一个很好的教程。

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

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

【参考方案2】：

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