Javascript翻转图像答案

【问题标题】：Javascript flip imageJavascript翻转图像
【发布时间】：2012-10-08 03:55:07
【问题描述】：

有谁知道是否有任何用于图像翻转的 JavaScript 库。我不想要 css3 效果，我想像在图像编辑器上那样在右变为左时实际翻转图像。

【问题讨论】：

你想镜像它的位还是仅仅镜像它的渲染？
镜像它的位，但我也需要它在 IE8 上工作
使用Canvas 就很简单了，但这在 IE8 上不起作用...
从 Web 下载并驻留在浏览器缓存中的图像的“镜像位”？

【解决方案1】：

翻转图像的一种简单方法是使用 CSS3。我假设您所说的“CSS3 效果”是指动画，而这不会这样做。

img {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

这是通过在 X 轴上将图像缩放 -1（沿该轴翻转）和在 Y 轴上缩放 1（什么都不做）来实现的。如果你想在 Y 轴而不是 X 轴上翻转，你可以在 X 和 Y 之间切换。

如果需要，CSS3 变换也可以用于旋转。除了scale(-1, 1)，您还可以使用rotate(90deg) 之类的东西顺时针旋转90 度。

对于 Internet Explorer 支持，您可以使用 filter 属性：

img {
    filter: fliph;
    /* all of the transforms above */
}

【讨论】：

@FlorianShena：我添加了一些我发现的支持 IE8 的东西，但是我手头没有带有 IE8 的 Windows 机器，所以我无法测试它。
这看起来很有用。您能否提供jsfiddle 或jsbin 的示例用法？
@AndersonGreen：这是一种非常无关紧要的技术；一个例子应该是不必要的。但是，如果出于某种原因，有人需要一个，here's one。