使用javascript旋转图像或div？
我正在开发一个网络应用程序，需要允许用户拖放以及旋转图像。
拖放是通过 jQuery UI Draggable 解决的。
但是我该如何旋转页面上的图像呢？我的图像大多是单色矩形。我使用 div 将它们绘制在页面上，但如何旋转它们？
如果它们只旋转 22、5-45-67、5-90 度就可以了
所以我想到了 3 种解决方案
使用 Canvas
问题：IE 支持
使用
divs问题：也需要canvas来旋转
PHP GD
这个解决方案是唯一的希望。
工作原理：应用程序将预渲染原始图像的 (22,5*x) 旋转版本。因此，每当用户想要旋转图像时，它们都会准备就绪。
请帮忙。任何建议表示赞赏
I'm working on a web application that need to allow the user to drag and drop as well as rotate an image.
Drag and drop is solved with the jQuery UI Draggable.
But how am I suppose to rotate an image on the page? My images are mostly one colored rectangles. I used divs to draw them on the page but how to rotate them?
It is okay if they only rotate 22, 5-45-67, 5-90 degrees
So I think of 3 solutions
Using Canvas
Problem: IE support
Using
divsProblem: it also needs canvas to rotate
PHP GD
This solution is the only hope that left.
How it might work: The application will prerender (22,5*x) rotated versions of original image. So they will be ready whenever user wants to rotate an image.
Please help. Any suggestions appreciated
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
一种可能的解决方案是使用 JavaScript 图形矢量库，当在 IE 上使用时，它可以自动使用画布的替代品。
Raphael 确实不错，请尝试一下：
您可以在此处找到有关 raphael 旋转的更多信息：
One possible solution is to use a JavaScript graphic vector library that can use automatically an alternative to canvas when used on IE.
Raphael is a really good one, give it a try:
You can find more informations about rotation with raphael here:
看看：
http://www.dyn-web.com/code/rotate_images/
< a href="https://stackoverflow.com/questions/968642/rotate-image-顺时针-或逆时针-inside-a-div-using-javascript">使用javascript在div内顺时针或逆时针旋转图像
take a look:
http://www.dyn-web.com/code/rotate_images/
Rotate image clockwise or anticlockwise inside a div using javascript
服务器端方法听起来有点浪费（需要下载所有版本的图像），我敢说你应该尝试使用 Flash 来实现跨浏览器和客户端解决方案。
The server side method sounds a bit wasteful (all versions of the image need to be downloaded), dare I say you should try using Flash for a cross-browser and client side solution.
除了调整图像大小之外，您无法直接使用 Javascript 操作图像（这在技术上是使用 CSS 完成的，而不是 Javascript...）。最好的解决方案是使用 Raphaël；它允许您评分，还可以拖放，并且它也是使用 JQuery 构建的。
当然，您可以交替使用不同的图像状态并将它们用作旋转矩形的“精灵”，但是您不会在那里发挥可扩展性。 （GD 是一个糟糕的设计，不要使用它。）
You cannot manipulate image directly with Javascript other than resizing them (and this is technivally done with CSS, not Javascript...). The best solution would be to use Raphaël; it will allow you to ratate, but also drag and drop, and it is also built using JQuery.
Of course you could alternately use different image states and use them as "sprites" for your rotated rectangles, however you will not play extensibility there. (GD is a bad design, don't use that.)