组合图像旋转&在jQuery中裁剪

时间:2009-09-17 11:12:23

标签: javascript jquery image image-manipulation

我们目前有一个裁剪图像的系统,它在前端使用jCrop,在后端使用.NET中的System.Drawing - 这非常有效,但现在我们需要引入图像旋转。只需要90度角,jQuery.Rotate可以正常工作,但我想优雅地结合这两个jQuery插件。你有这方面的经验吗?是否有“摇动和烘烤”的解决方案?

5 个答案:

答案 0 :(得分:1)

我建议旋转图像服务器端。你真的无法将jCrop与旋转的图像结合起来,因为基于CSS的方法会对宽度和高度“撒谎”。

它可以非常快。当单击按钮时,您的UI只会将“rotate = 90”添加到图像查询字符串,并且图像将重新加载。

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

选择look at the demo page来查看它的响应性 - 添加rotate命令只需要几行javascript。如果您需要,我可以上传一个如何组合它们的样本。

答案 1 :(得分:1)

我知道这是一个老问题,但你检查过这个名为CropIt的jQuery插件吗?

该演示看起来非常好,您可以在同一个插件中进行缩放,裁剪和旋转,无需后端代码。

希望这有帮助。

答案 2 :(得分:0)

我认为jQuery pipe-lining是任何jQuery插件的答案

例如:

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

答案 3 :(得分:0)

由于这两个插件以非常不同的方式运行,我认为你不能轻易地将两者结合起来。 jCrop只允许您在图像上定义矩形选框。另一方面,旋转使用<canvas>实际旋转图像或使用DXImageTransform过滤器显示旋转(实际上不旋转源图像。)

答案 4 :(得分:0)