藥藥，切克鬧，一人我編碼累，累把那bug寫成堆。秋高氣爽空氣乾燥你一定dei多喝水，過完了這周我就要回去、趁還有幾天、你盡情的來跟我懟~~~ 新的一年，很久沒更博客了，眼看十一要來了，聽說過了十一就等過年了，但是感覺剛過完年一樣，心裡黯然神傷，更博一篇以表對小白駒過隙之神速聊以慰藉下…… 在開發中這 ...
藥藥，切克鬧，一人我編碼累，累把那bug寫成堆。秋高氣爽空氣乾燥你一定dei多喝水，過完了這周我就要回去、趁還有幾天、你盡情的來跟我懟~~~
新的一年，很久沒更博客了，眼看十一要來了，聽說過了十一就等過年了，但是感覺剛過完年一樣，心裡黯然神傷，更博一篇以表對小白駒過隙之神速聊以慰藉下……
在開發中這樣一個場景，web應用程式某處功能會接收來自各個戶上傳的圖片，後臺有個圖片查看功能，實際生產過程中的結果出現了用戶上傳的圖片是倒轉的或者圖片因為遠距離拍攝上傳的比較模糊的情況。
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代碼——根據是向左轉還是向右轉動態改變class的名稱就行了。再次提示下，IE8瀏覽器是使用的是-ms-filter直接filter沒有效果。
這裡使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式沒有效果的。但絕對適用於90%以上的互聯網用戶了。
2、圖片放大縮小
即為調整圖片的寬和高。如下核心代碼
//放大縮小圖片 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、區域內拖動圖片
圖片放大超過父級容器時，支持圖片在容器內拖動，在mousedown的條件下綁定mousemove，計算拖拽區域大小，核心代碼如下：
$(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、綜合功能實現代碼如下，運行請底部下載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; "> <img src="images/1.jpg" id="rotImg" style="cursor: move; visibility: visible; position: absolute; 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="向右旋轉" id="rotRight"> <input type="button" value="向左旋轉" 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、最終效果如下圖所示：
6、示例代碼下載地址： https://github.com/mszhtech/ImageView
