blocks|key|196117|text|我建议轮换图像服务器端。你真的不能把jCrop和旋转过的图片结合起来，因为基于CSS的方法会在宽度和高度上“说谎”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196118|它可以非常快。您的UI只需在单击按钮时将'rotate=90‘添加到图像查询字符串中，图像就会重新加载。|196119|这是一个非常棒的simple+example+of+using+jCrop+and+querystring-based+resizing。|offset|length|196120|以look+at+the+demo+page为例，看看它的响应性如何添加旋转命令只需要几行javascript。如果你需要的话，我可以上传一个如何组合它们的样本。|196121|entityMap|0|LINK|mutability|MUTABLE|url|http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/|1|http://images.imageresizing.net/JCropSample/Advanced.aspx^0|0|0|8|1O|0|0|1|L|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$F|10|G|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I suggest rotating the image server side. You really can't combine jCrop with a rotated image, since a CSS-based method would 'lie' about the width and height.

It can be extremely fast. Your UI would simply add 'rotate=90' to the image querystring when the button was clicked, and the image would reload.

Here's a very <a href="http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/" rel="nofollow">simple example of using jCrop and querystring-based resizing</a>.

Take a <a href="http://images.imageresizing.net/JCropSample/Advanced.aspx" rel="nofollow">look at the demo page</a> to see how responsive it is - adding the rotate command would only take a few lines of javascript. If you need it, I could upload a sample of how to combine them.

blocks|key|2107973|text|我知道这是一个老生常谈的问题，但是，您检查过这个名为CropIt的jQuery插件吗|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2107974|演示看起来非常好，你可以在同一个插件中缩放，裁剪和旋转，不需要后端代码。|2107975|希望这能有所帮助。|2107976|entityMap|0|LINK|mutability|MUTABLE|url|http://scottcheng.github.io/cropit/^0|Q|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

I know this is an old question but, have you checked this jQuery plugin called <a href="http://scottcheng.github.io/cropit/" rel="nofollow noreferrer">CropIt</a>?

The demo looks very good and you have zoom, crop and rotate in the same plugin, no backend code required.

Hope this helps.

blocks|key|5085794|text|我认为jQuery管道内衬是任何jQuery插件的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5085795|例如：|5085796|$("image").rotate(foo).crop(foo);|code-block|syntax|javascript|5085797|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I think jQuery pipe-lining is the answer for any jQuery plugin

for example:

<pre><code>$("image").rotate(foo).crop(foo);
</code></pre>

blocks|key|2972285|text|由于这两个插件的操作方式截然不同，我认为您不能轻易地将两者结合起来。jCrop只允许您在图像上定义一个矩形字幕。另一方面，旋转要么使用<canvas>实际旋转图像，要么使用DXImageTransform滤镜显示旋转的图像(而不是实际旋转源图像)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2972286|entityMap^0|1V|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Since the two plugin-ins operate in very different ways, I don't think you can readily combine the two. jCrop simply allows you to define a rectangular marquee over an image. Rotation, on the other hand, either uses <code>&lt;canvas&gt;</code> to actually rotate the image or the DXImageTransform filter to show it rotated (not actually rotating the source image.)

blocks|key|2972295|text|您可以尝试jquery+CropZoom：http://plugins.jquery.com/project/CropZoom|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2972296|演示和下载请点击此处：http://www.gastonrobledo.com.ar/cropzoom/index.html|2972297|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/CropZoom|1|http://www.gastonrobledo.com.ar/cropzoom/index.html^0|L|16|0|0|B|1F|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

you may try jquery CropZoom:
<a href="http://plugins.jquery.com/project/CropZoom" rel="nofollow">http://plugins.jquery.com/project/CropZoom</a>

Demo and downloads here:
<a href="http://www.gastonrobledo.com.ar/cropzoom/index.html" rel="nofollow">http://www.gastonrobledo.com.ar/cropzoom/index.html</a>

We currently have a system for cropping images that uses jCrop on the front-end, and <code>System.Drawing</code> in .NET on the backend - this works very well, but now we need to introduce image rotation. Only 90 degree angles are needed, and <a href="http://code.google.com/p/jquery-rotate/" rel="noreferrer">jQuery.Rotate</a> works fine in isolation, but I would like to combine these two jQuery plugins gracefully. Do you have any experience in this area? Are there "shake &amp; bake" solutions?

Combined image rotation & cropping in jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我们目前有一个用于裁剪图像的系统，该系统在前端使用jCrop，在后端使用.NET中的System.Drawing -这非常有效，但现在我们需要引入图像旋转。只需要90度的角度，在隔离的情况下工作得很好，但我想优雅地组合这两个jQuery插件。你有这方面的经验吗？有没有“摇晃和烘焙”的解决方案？

问在jQuery中组合图像旋转和裁剪
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中组合图像旋转和裁剪EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中组合图像旋转和裁剪
EN