快捷導(dǎo)航

使圖片旋轉(zhuǎn)的3種解決方案

更新時(shí)間：2013年11月21日 10:45:25 作者：

這篇文章主要介紹了使圖片旋轉(zhuǎn)的3種解決方案,并了幾個(gè)方法的對(duì)比，大家參考看一下吧

圖片旋轉(zhuǎn)效果的研究
最近在項(xiàng)目中需要做圖片的旋轉(zhuǎn)功能，我研究了一下。下面來(lái)總結(jié)下圖片旋轉(zhuǎn)在各個(gè)瀏覽器的支持情況

一、圖片旋轉(zhuǎn)的方案

1）css3實(shí)現(xiàn)圖片旋轉(zhuǎn)功能：支持的瀏覽器有chrome，firefox；opera是不支持的。

具體代碼為：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上述代碼的意思就是將圖片順時(shí)針旋轉(zhuǎn)90度，其實(shí)可以旋轉(zhuǎn)任意的度數(shù)。但是支持css3的瀏覽器只有chrome，firefox3.6 ，safari，ie瀏覽器是不支持的。那么IE
下該怎么處理呢？于是就有了下面的一種方案

2）在IE下通過(guò)濾鏡來(lái)實(shí)現(xiàn)旋轉(zhuǎn)

具體代碼為：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
這里的rotation 參數(shù)可以為0,1,2,3 ，表示的意思就是這些數(shù)字乘以90后的旋轉(zhuǎn)角度。IE下如果要旋轉(zhuǎn)任意的角度要用到矩陣變換濾鏡，我們?cè)谌粘５氖褂眠^(guò)程中，
大部分使用的是變換90的倍數(shù)，這里就不討論任意的角度了。但是還是有問(wèn)題的，如果非ie瀏覽器，不支持CSS3，那么如果實(shí)現(xiàn)圖片的旋轉(zhuǎn)呢，其實(shí)canvas也是可以圖片旋轉(zhuǎn)的。

3）用canvas來(lái)實(shí)現(xiàn)圖片的旋轉(zhuǎn)

canvas在chrome，firefox，opera等瀏覽器中均支持，他是有一個(gè)基于 JavaScript 的繪圖 API，。首先我們來(lái)看看怎樣利用canvas+JavaScript實(shí)現(xiàn)圖片的旋轉(zhuǎn)

代碼如下：

復(fù)制代碼代碼如下:

var test = function(){
        var canvas = document.getElementById("result");
        var oImg = document.getElementById("Img");        
        canvas.height = 300;
        canvas.width = 200;
        var context = canvas.getContext("2d");
        context.save();
        context.translate(200,0);
        context.rotate(Math.PI/3);
        context.drawImage(oImg, 0, 0, 300, 200);
        context.restore();
        oImg.style.display = "none";
};

上述代碼首先得到一個(gè)canvas對(duì)象，然后設(shè)置他的高度，開(kāi)始繪圖了。這個(gè)改變canvas的中心點(diǎn)和旋轉(zhuǎn)角度，然后將圖片畫(huà)到canvas中去，將其存儲(chǔ)起來(lái)，然后
隱藏之前的圖片。這種方法實(shí)現(xiàn)還是比較平滑的。

二、各種方案的對(duì)比

css3的實(shí)現(xiàn)方案，不會(huì)改變?cè)紙D片所占空間的大小的，但是ie下的濾鏡會(huì)改變圖片所占空間的大小。
其實(shí)ie下也是可以支持canvas的，只需要引用一個(gè)canvas的腳本。這個(gè)是有g(shù)oogle提供的一個(gè)。但是這個(gè)腳本有點(diǎn)大，沒(méi)有壓縮前有20多k
我比較建議在ie下使用濾鏡來(lái)實(shí)現(xiàn)，其他的瀏覽器使用canvas 標(biāo)簽來(lái)實(shí)現(xiàn)。

您可能感興趣的文章: