JQuery 裁剪图像客户端也保留原始版本

Posted 2023-02-25

【中文标题】JQuery 裁剪图像客户端也保留原始版本

【英文标题】：JQuery crop image clientside keeping also the original version

【发布时间】：2013-12-20 22:47:00

【问题描述】：

我阅读了很多关于使用 JCrop 进行客户端图像裁剪的讨论和回答，但我找不到我的问题的解决方案。

我有一个用 simple_form 生成的大表单，里面有一张图片（还有其他 input_fields）

我想上传这张图片，但在提交表单之前我需要裁剪这张图片，同时上传（并保留）原始版本。

我认为我的情况是标准的：你有一个博客，你加载了帖子图片，你需要为预告片调整图片，裁剪它。

如果我稍后编辑我的帖子，我有新作物的原始版本。

我正在考虑两种解决方案：

1) 使用此插件裁剪图像客户端：http://evrone.github.io/evroneCrop/，但我不知道如何使用 Carrierwave 管理 base64 编码图像。

2) 使用 JCrop JQuery Plugin 获取裁剪数据，使用我的表单在隐藏字段中传递裁剪数据，并使用 Carrierwave 创建裁剪版本，遵循 Ryan Bates 教程。

第二种解决方案看起来并不难，但我丢失了裁剪版本的痕迹：当我编辑我的帖子时，我想查看这两个版本，如果需要，可以将我的原始图像裁剪成另一种格式。

考虑到我对javascript不太熟练，实现这种情况的最佳方法是什么？

【问题讨论】：

如果您不介意在 cmets 中讨论如何使其工作，我可以给您一些想法？

好的，伙计，让我完成一些事情，我会给你一些想法

【参考方案1】：

在我看来，有两种方法可以做到：

上传图片，然后在 2 个单独的调用中进行裁剪 单独上传裁剪数据到图像，并使用 ImageMagick 裁剪（使用 Paperclip && 可能使用队列）（单次调用）

我猜这两种情况都相似（与您的 (2)）

无论哪种方式，为了以编程方式保持这种声音，我想保留原始图像以供以后使用。原因是您始终可以裁剪原件，但不能“取消裁剪”裁剪后的图像

---

先上传再裁剪

既然你已经在使用 Ajax，不如试试这个：

用户选择图片 Ajax 上传图片 您展示图像并使用 JCrop 定义裁剪尺寸

---

一键上传和裁剪

您可以在同一个调用中上传图像和裁剪

您在 (2) 的想法中提到了这个过程。为此，您是正确的，因为您必须将裁剪坐标存储在隐藏字段中

我之前没用过jCrop，但是根据jCrop manual，可以比较简单的调用坐标：

function showCoords(c) 
      // variables can be accessed here as
      // c.x, c.y, c.x2, c.y2, c.w, c.h
;

您可以根据需要更改各种隐藏输入的值，从而提供您需要的数据

然后您可以在图像数据库中添加几列：

images
id | paperclip / carrierwave columns | x | y | x2 | y2 | w | h | processed (boolean)

这将允许您存储原始图像（根据 Carrierwave / Paperclip），并保存其坐标

然后您可以创建一个处理文件，该文件将运行和处理图像，创建一个新的裁剪图像

如果您有兴趣，我可以为此编写一些代码

【讨论】：

@rickpeck 我认为第二种解决方案很好。我创建了一个图像上传表单。当我上传图像时，我会加载 jcrop 以获得裁剪后的版本。在提交时，我还将“裁剪坐标”（我添加到模型中）作为隐藏字段传递，在我的模型“before_saving”中，我使用 CarrierWave 和坐标裁剪图像。当我编辑表单时，我使用保存的坐标在我的预览中创建“先前的裁剪区域”，而不是我可以调整的。看起来不错，我会试试的。谢谢

谢谢罗伯托 - 如果您需要任何进一步的帮助，请告诉我！

@rickpeck。我完成了“红宝石”部分。问题是jquery部分...在表单的“预览”窗口上绑定jcrop并不容易...

罗伯托是什么意思？