Javascript （js/jquery）在FF/Saf/Chrome中旋转图像而不使用画布或缩放画布项目

我正在做一个项目，在这个项目中，我需要根据用户的喜好旋转和成像，然后允许他们放大和缩小一点

在IE中使用jquery.rotate.1-1.js，一切都能完美工作（多么罕见），因为MS编写了自己的旋转工具（progid:DXImageTransform），所以img会旋转，然后作为图像保存。然而，看看JS，我发现如果浏览器不是IE，那么画布就会被渲染（我从来没有真正使用过画布），这意味着一旦画布被旋转的图像绘制出来，我就无法放大图像，因为如果我理解正确，画布实际上并不包含信息

我还尝试用我的非IE浏览器进行CSS3转换，并使所有内容正确旋转，但当我尝试缩放时，它使用的是现在不存在的div大小

是否有任何工具允许在客户端进行旋转和缩放？或

---

有没有办法在FF/Chrome/Saf中旋转img标签并在之后保持旋转图像？

在所有当前的web浏览器中都有一些

transform

CSS版本。我使用以下样式进行旋转：

.rotate
{
    -webkit-transform: rotate(-90deg);    /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);       /* Firefox 3.5+ */
    -o-transform: rotate(-90deg);         /* Opera starting with 10.50+ */
    -ms-transform: rotate(-90deg);        /* IE9 */
}
.rotateOldIE
{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
    zoom: 1;
}

---

如果您搜索CSS样式，您将找到上述CSS样式中任何样式的详细描述，并将找到许多示例。

您可以查看此工具[http://css3.mikeplate.com/][1]

---

[1] ：它将允许您执行所有转换并动态查看它们，以便您可以在不同的浏览器上测试它，它允许僵尸和旋转

尝试使用canvas的toDataURL。唯一的限制是映像必须位于运行脚本的同一站点上

---

请参阅：

以在应用程序中包含另一个库为代价，使用Raphaël可以轻松实现这一点(http://raphaeljs.com/). 它将在IE上使用VML旋转和缩放可以在画布上完成：

可以使用三组不同的参数调用drawImage方法：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

这三个元素中的每一个都可以为image参数使用一个HTMLImageElement、一个htmlcanvaseelement或一个HTMLVideoElement

context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

将给定图像绘制到画布上。这些论点的解释如下：

这个和

context . rotate(angle)

可用于旋转和缩放

context . rotate(angle)