(js/jquery)在没有画布的情况下在FF/Saf/Chrome中旋转图像或缩放画布项目

Question

我正在开发一个项目,我需要旋转并根据用户的喜好进行成像,然后允许它们进行缩放.

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

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

是否有任何工具允许旋转然后在客户端放大？或者有没有办法在FF/Chrome/Saf中旋转img标签并在之后保持旋转图像？

Answer 1

目前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样式中找到任何详细描述,您会发现许多示例.