首页 文章

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

提问于
浏览 次
1

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

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

我想上传此图片，但在表单提交之前我需要裁剪此图片，同时， upload (and keep) also the original version .

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

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

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

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

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

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

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

jquery ruby-on-rails

1 回答

  • 0

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

    • 上传图片，然后在两个单独的通话中裁剪

    • 将作物数据上传到图像，并使用ImageMagick进行裁剪（使用Paperclip &&可能带队列）（单个调用）

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

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

    Upload First Then Crop

    既然你已经在使用Ajax，为什么不尝试这个：

    • 用户选择图像

    • Ajax上传图片

    • 您显示图像并使用JCrop定义裁剪尺寸

    Upload & Crop With One Call

    您可以在同一个通话中上传图像和裁剪

    你在（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
};

    您可以使用所需的联合更改各种隐藏输入的值，从而提供所需的数据

    然后，您可以向映像db添加几个列：

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

    这将允许您存储原始图像（根据Carrierwave / Paperclip），以及保存其合作

    然后，您将能够创建一个处理文件，该文件将贯穿并处理图像，从而创建新的裁剪图像

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

    回复于

相关问题