在jQuery中合并图像旋转和裁剪

我们目前有一个系统用于裁剪前端使用jCrop的图像，而在后台.NET使用System.Drawing - 这很好，但现在我们需要引入图像旋转。只需要90度的角度，并且jQuery.Rotate可以独立工作，但我想要优雅地将这两个jQuery插件组合在一起。你有这方面的经验吗？有没有“摇&烘烤”的解决方案？在jQuery中合并图像旋转和裁剪

来源

2009-09-17 Daniel Schierbeck

你能提供你想要达到的更多细节吗？你想让用户定义一个裁剪矩形并同时定义一个旋转角度吗？你试图达到的确切视觉效果是什么？ – 2009-09-17 14:38:30

嗨Ates，我想要有一个单一的图像视图，带有一个工具栏，允许在一个单一的组合步骤中旋转和裁剪图像。 – 2009-09-20 16:02:00

我认为jQuery的管内衬为任何jQuery插件

例如答案：

$("image").rotate(foo).crop(foo);

来源

2009-09-17 11:15:56

恐怕这是行不通的。 jCrop和jQuery-Rotate都对DOM进行了重大更改;他们需要以某种方式进行整合。作为最后的手段，我可以分几步旋转和裁剪，但我宁愿将它们放在一起。 – 2009-09-17 11:45:35

流水线..在jQuery中不存在。每个函数只返回一个'jQuery'对象。 Dykam的 – Dykam 2009-09-17 14:50:55

：这就是我们所说的管道衬里：D，你可以管道多个操作丹尼尔：你是对的，但我们仍然可以找到解决方案...我喜欢这个问题，并会发布另一个答案，如果我找到一个 – 2009-09-17 17:13:14

由于这两个插件的插件运行在非常不同的方式，我不认为你可以随时结合这两者。 jCrop只允许您在图像上定义矩形选框。旋转，而另一方面，无论是使用<canvas>实际旋转图像或DXImageTransform过滤器来显示它旋转

来源

2009-09-17 14:37:07

对IE浏览器旋转完成角度属性，这意味着你可以做旋转，然后jCrop – 2009-09-17 17:14:20

什么角度属性？ jquery-rotate的官方网站（http://code.google.com/p/jquery-rotate/）声明：支持两种JavaScript图像处理实现： 1.对Microsoft Internet Explorer使用DXImageTransform过滤器 2.使用其他浏览器的画布对象 – 2009-09-17 17:54:25

是的，并且过滤器应用于css，因此在应用旋转后可以实现旋转然后jCrop – 2009-09-18 17:23:10

，你可以尝试的jQuery CropZoom（实际上没有旋转的源图像。）： http://plugins.jquery.com/project/CropZoom

演示和这里下载： http://www.gastonrobledo.com.ar/cropzoom/index.html

来源

2011-04-11 10:17:17 jihchuan

我建议旋转图像服务器端。您实际上无法将jCrop与旋转后的图像组合在一起，因为基于CSS的方法会在宽度和高度上“撒谎”。

它可以非常快。当按钮被点击时，你的用户界面会简单地将“旋转= 90”添加到图像查询字符串中，并且图像将被重新加载。

这里是一个非常simple example of using jCrop and querystring-based resizing。

以look at the demo page看看它是如何响应 - 添加旋转命令只需要几行javascript。如果你需要它，我可以上传一个如何组合它们的样本。

来源

2011-05-31 15:07:02