IE8、9、10下图片旋转

最新推荐文章于 2021-06-17 11:35:01 发布

tang745163962

最新推荐文章于 2021-06-17 11:35:01 发布

阅读量1.4w

点赞数 3

分类专栏：知识随笔

本文链接：https://blog.csdn.net/tang745163962/article/details/27669865

版权

知识随笔专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这里两天要实现一个功能，图片左右旋转

很是头大，在网上收集资料就花了2.5天+最后加上实际应用ie8 ，ie9 ，ie19上出现的各种问题+ 解决问题

在网上找了各种资料，了解到旋转又以下几种实现方案：

1，filer

2，transform

3，canvas

4，jquery

第一步：先判断ie版本（这里直说ie，因为我们的项目只支持ie）

这里要单独说ie10 了，一般的方法是不行的，因为ie有 strict mode 严格模式

（quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法）

法一：

这种判断方式在正真的ie10浏览器上是无用的那么要用第二种了，这是在googl上找到方法，百度没找到（花了一个上午才找到这个方法哦）

法二：

法二这种方法在ie10上可以判断，是因为了解了10版本的特性是严格模式

var hasStrictMode = (function() {
"use strict";
return this === undefined;
}());

如果这个hasStrictMode 方法返回true则是了

来个小插曲，在这里判断ie版本的时候我被坑了一天，因为我们系统里有人加了这一句搞得哦在ie10和ie9下都是alert（IE9）

这些挨千刀的。。。。

html中：

javascript中：

第二步：各种测试

前面已经讲过判断ie版本的操纵，我就直接开始各种方法试了，虽然实际中我是先实验过了才知道要区分ie版本的，嘻嘻。

1，filer滤镜只能在ie8下版本使用（到目前为止2014-5-30 13:52:11），实践证明image图片标签在ie9和ie10需要用不同的东东来实现

代码：

var p;

var img = document.getElementById("view-image");

img.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation="+p+");";

这里的p是0 、1、2、3；0是还原，1=90°、2=180°、3=270°

filer不能在ie9 和ie10上使用。

2，transform css样式各个版本都支持，之前看到这个的时候我背js文件和css的样式结构给吓到了，因为我不会写css，然后放弃用了canvas，后面canvas 和img中我项目的html结构问题，最终我还是采用了css的transfer来做旋转了，这个就一句话的事，比filter滤镜还简单，这个发现还是在我家亲爱的帮助下.......

var p;

var img = document.getElementById("view-image");

img.style.transform="rotate("+p+"deg)";

这里的p是时间旋转的度数，0是还原，如果要旋转45°那么p就是45,90°那么就是90 180°那么就是180

3，canvas 画布，哈哈重点来了，这就是我搞了3天就为了做个旋转的，我觉得这个很有意思，我家亲爱的给了我一本书，叫我看，也是因为给了一本书我才决定把这一个星期的东西给总结下。

我的目标是把图片左右旋转，也不影响之前的其他放大、缩小、左右上下移动、的功能。在经历过把canvas标签和imag标签合用的痛苦过程后，我才觉悟，原来我只要一个canvas就可以实现了，原来的image我可以不实用了，下面就来看下，我是怎么弄的吧。

思路:搞一个canvas画布，把动态获取的图片jpg的插入到canvas，接下来的操作就直接把画布作为对象就好了；再直接canva的属性，合理运用就可以了。我看qq控件的图片旋转也是用的canvas，当然我是使用的ie10浏览器的。放松心情..其实之前很苦恼....呵

//插入图片到画布