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

Question

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

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

我也尝试过使用我的非 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 样式中任何样式的详细描述，并且您会找到许多示例。