使圖片旋轉(zhuǎn)的3種解決方案
圖片旋轉(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è)谌粘5氖褂眠^(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)
代碼如下:
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)。
- jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果(附demo源碼下載)
- JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
- Android UI之ImageView實(shí)現(xiàn)圖片旋轉(zhuǎn)和縮放
- C#中圖片旋轉(zhuǎn)和翻轉(zhuǎn)(RotateFlipType)用法分析
- javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
- PHP圖片處理之圖片旋轉(zhuǎn)和圖片翻轉(zhuǎn)實(shí)例
- js實(shí)現(xiàn)圖片旋轉(zhuǎn)的三種方法
- 讓圖片旋轉(zhuǎn)任意角度及JQuery插件使用介紹
- 利用C#代碼實(shí)現(xiàn)圖片旋轉(zhuǎn)360度
相關(guān)文章
Dojo Javascript 編程規(guī)范 規(guī)范自己的JavaScript書(shū)寫(xiě)
良好的JavaScript書(shū)寫(xiě)習(xí)慣的優(yōu)點(diǎn)不言而喻,今天彬Go向大家推薦Dojo Javascript 編程規(guī)范,相當(dāng)不錯(cuò)的 Javascript 編程風(fēng)格規(guī)范,建議大家可以借鑒一下此規(guī)范編寫(xiě) Javascript。感謝i.feelinglucky的翻譯2014-10-10一個(gè)簡(jiǎn)單的網(wǎng)站訪問(wèn)JS計(jì)數(shù)器 刷新1次加1次訪問(wèn)
一個(gè)簡(jiǎn)單的網(wǎng)站訪問(wèn)JS計(jì)數(shù)器,一般就是學(xué)習(xí)下原來(lái),不建議使用,現(xiàn)在cnzz或百度統(tǒng)計(jì)多試不錯(cuò)的2012-09-09javascript學(xué)習(xí)筆記(十六) 系統(tǒng)對(duì)話框(alert、confirm、prompt)
javascript學(xué)習(xí)筆記之系統(tǒng)對(duì)話框(alert、confirm、prompt)使用介紹,學(xué)習(xí)js的朋友可以參考下2012-06-06關(guān)于JavaScript 原型鏈的一點(diǎn)個(gè)人理解
本文給大家分享的是個(gè)人關(guān)于JavaScript原型鏈相關(guān)知識(shí)的一些理解,這里推薦給大家,希望大家能夠喜歡2016-07-07Javascript實(shí)例教程(19) 使用HoTMetal(2)
Javascript實(shí)例教程(19) 使用HoTMetal(2)...2006-12-12