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

Question

我正在做一个项目，我需要旋转和图像到用户的喜好，然后允许他们放大和缩小一点。

使用IE中的jquery.rotate.1-1.js，一切都能完美地工作(非常罕见)，因为MS编写了自己的旋转工具(progid:DXImageTransform)，所以img被旋转，然后以图像的形式保存。然而，查看JS，我发现如果浏览器不是IE，那么将呈现一个画布(我从未真正使用过canvas)，这意味着一旦画布在图像旋转的情况下绘制，我就不能放大图像，因为如果我理解正确的话，画布实际上并不包含信息。

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

有没有什么工具可以在客户端进行旋转和缩放？或者，有没有办法在FF/Chrome/Saf中旋转img标签，并在旋转后保持图像旋转？

Answer 1

在当前所有的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样式中找到任何样式的详细描述，你会发现很多例子。

Answer 2

您可以查看此工具的http://css3.mikeplate.com/

1：http://css3.mikeplate.com/它将允许你做所有的变换，并在飞行中看到它们，所以你可以在不同的浏览器上测试它，它允许缩放和旋转

Answer 3

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

请参阅：http://jsfiddle.net/ghostoy/ZKj9V/