在開發(fā)中這樣一個場景，web應(yīng)用程序某處功能會接收來自各個戶上傳的圖片潮峦，后臺有個圖片查看功能囱皿，實際生產(chǎn)過程中的結(jié)果出現(xiàn)了用戶上傳的圖片是倒轉(zhuǎn)的或者圖片因為遠(yuǎn)距離拍攝上傳的比較模糊的情況勇婴。
1、解決圖片角度的問題
大概原理很簡單嘱腥，切換HTML元素對象（圖片）的class耕渴。如下CSS代碼：
.rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
再添加簡單的JavaScript代碼——根據(jù)是向左轉(zhuǎn)還是向右轉(zhuǎn)動態(tài)改變class的名稱就行了。再次提示下齿兔，IE8瀏覽器是使用的是-ms-filter直接filter沒有效果橱脸。
這里使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式?jīng)]有效果的分苇。但絕對適用于90%以上的互聯(lián)網(wǎng)用戶了添诉。
2、圖片放大縮小
即為調(diào)整圖片的寬和高医寿。如下核心代碼
//放大縮小圖片
function imgToSize(size) {
var img = $("#rotImg");
var oWidth = img.width(); //取得圖片的實際寬度
var oHeight = img.height(); //取得圖片的實際高度
img.width(oWidth + size);
img.height(oHeight + size / oWidth * oHeight);
}
3栏赴、區(qū)域內(nèi)拖動圖片
圖片放大超過父級容器時，支持圖片在容器內(nèi)拖動靖秩，在mousedown的條件下綁定mousemove须眷，計算拖拽區(qū)域大小，核心代碼如下：
$(document).bind('mousemove.imgview', function (event) {
if ($img.data('mousedown')) {
var dx = event.pageX - settings['pageX'];
var dy = event.pageY - settings['pageY'];
if ((dx == 0) && (dy == 0)) {
return false;
}
var newX = parseInt($img.css('left')) + dx;
if (newX > 0) newX = 0;
if (newX < settings['width'] - $img.width())
newX = settings['width'] - $img.width() + 1;
var newY = parseInt($img.css('top')) + dy;
if (newY > 0) newY = 0;
if (newY < settings['height'] - $img.height())
newY = settings['height'] - $img.height() + 1;
if (settings['width'] >= $img.width()) {
newX = settings['width'] / 2 - $img.width() / 2;
}
if (settings['height'] >= $img.height()) {
newY = settings['height'] / 2 - $img.height() / 2;
}
$img.css('left', newX + 'px');
$img.css('top', newY + 'px');
settings['pageX'] = event.pageX;
settings['pageY'] = event.pageY;
$img.data('cannot_minimize', true);
}
return false;
});
4盆偿、綜合功能實現(xiàn)代碼如下柒爸，運行請底部下載demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.rot1 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot2 {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot3 {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#imageView_container{
border: 2px solid #000000;
}
</style>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-browser.js"></script>
<script src="js/jquery.imageView.js"></script>
</head>
<body>
<div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; ">
</div>
<div style="padding-top:5px;">
<input type="button" value="放大" onclick="imgToSize(100)">
<input type="button" value="縮小" onclick="imgToSize(-100);">
<input type="button" value="向右旋轉(zhuǎn)" id="rotRight">
<input type="button" value="向左旋轉(zhuǎn)" id="rotLeft">
</div>
<script type="text/javascript">
$(function () {
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
img: document.getElementById("rotImg"),
rot: 0
};
var fun = {
right: function () {
param.rot += 1;
param.img.className = "rot" + param.rot;
if (param.rot === 3) {
param.rot = -1;
}
},
left: function () {
param.rot -= 1;
if (param.rot === -1) {
param.rot = 3;
}
param.img.className = "rot" + param.rot;
}
};
param.right.onclick = function () {
fun.right();
return false;
};
param.left.onclick = function () {
fun.left();
return false;
};
$('#imageView_container').imageView({ width: 800, height: 500 });
});
var size = 0;
//放大縮小圖片
function imgToSize(size) {
var img = $("#rotImg");
var oWidth = img.width(); //取得圖片的實際寬度
var oHeight = img.height(); //取得圖片的實際高度
img.width(oWidth + size);
img.height(oHeight + size / oWidth * oHeight);
}
</script>
</body>
</html>
5、最終效果如下圖所示：
Paste_Image.png
學(xué)習(xí)前端的同學(xué)注意了Ｊ屡ぁＩ又伞！
學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話求橄，歡迎加入前端學(xué)習(xí)交流群461593224今野，我們一起學(xué)前端！
