Question

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

我有一个用simple_form生成的大表单，里面有一个图像（和其他input_fields一起）

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

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

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

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

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

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

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

考虑到我对javascript的熟练程度不高，这是实现这种情况的最佳方法吗？

Answer 1

我看到它的方式，有两种方法可以做到：

我猜两种情况都相似（对你的（2））

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

先上传然后裁剪

由于您已经在使用Ajax，为什么不试试这个：

上传＆amp;通过一次通话裁剪

您可以上传图片＆amp;在同一个电话中播种

您在（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），以及保存其合作

然后你就可以创建一个将贯穿＆amp;的处理文件。处理图像，创建新的裁剪图像

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