使用JavaScript解決網頁圖檔拉伸問題

轉載請注明出處：http://blog.csdn.net/xiaojimanman/article/details/53084716

http://www.llwjy.com/blogdetail/92b85d1cdb0343a7bd6d8dd0868c0f82.html

個人部落格站已經上線了，網址 www.llwjy.com ~歡迎各位吐槽~

-------------------------------------------------------------------------------------------------

在開始之前先打一個小小的廣告，自己建立一個QQ群：321903218，點選連結加入群【Lucene案例開發】，主要用于交流如何使用Lucene來建立站内搜尋背景，同時還會不定期的在群内開相關的公開課，感興趣的童鞋可以加入交流。

問題描述

這段時間在做PM的需求的時候突然發現一個問題，産品上的圖檔來自多個第三方，具體的尺寸無法确定，如果直接在樣式中寫死圖檔的尺寸大小就會出現圖檔拉伸的現象，十分影響産品的美觀，是以希望可以找到一個比較好的解決方案。自己先做了一個簡單的demo來展示問題。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="./js/jquery-1.11.1.min.js"></script>
	<style>
		.img1{width:200px;height:200px;border: 1px solid #000;overflow: hidden;margin: 10px;}
		.img2{width:200px;height:90px;border: 1px solid #000;overflow: hidden;margin: 10px;}	
	</style>
</head>	
<body>
	<div class="img1" style="width:">
		<img id="img1" src="./img/1.jpg" height="100%" width="100%">
	</div>
	<div class="img2" style="width:">
		<img id="img2" src="./img/1.jpg" height="100%" width="100%">
	</div>
</body>
</html>

使用JavaScript解決網頁圖檔拉伸問題

上述這種情況還是挺影響美觀的，是否可以考慮動态的設定圖檔的尺寸呢？

解決思路

是否可以在浏覽器加載圖檔資源後，擷取圖檔的真實尺寸和圖檔容器的大小，然後動态地設定圖檔的width、height屬性。

擷取圖檔的真實尺寸

html5下已經提供了相應的方法來傳回圖檔的真實尺寸大小（img.naturalWidth、img.naturalHeight），針對IE6/7/8也可以通過以下方法來擷取真實尺寸的大小

var imgae = new Image();
		image.src = img.src;
		image.onload = function() {
	    	var w = image.width;
	    	var h = image.height;
}

下面就編寫對應的JS方法擷取圖檔的真實尺寸已經圖檔容器的尺寸大小

setImgSize : function(img, callback) {
	if (img.naturalWidth) { //html5
		callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
	} else { // IE 6 7 8
		var imgae = new Image();
		image.src = img.src;
		image.onload = function() {
                   callback(img, image.width, image.height, img.width, img.height);
                }
	}
}

重新設定圖檔尺寸

在擷取圖檔真實尺寸已經容器尺寸之後，我們需要重新設定圖檔的尺寸大小。這裡先簡單的介紹下處理目标：如果設定後的尺寸超過展示區域，則展示圖檔的中間部分，如果展示區域大于圖檔尺寸，則圖檔居中顯示。用圖簡單說明下，黑色實線為圖檔的顯示區域，綠色部分為圖檔的大小。

使用JavaScript解決網頁圖檔拉伸問題

下面我們提供三種方法來處理圖檔，分别實作上部兩種（寬度一緻）、下部兩種（高度一緻）、右側兩種（鋪滿顯示區域），下面就分别介紹這三種方法：

一、保證寬度一緻

//原始寬度 原始高度 容器寬度 容器高度
//保證寬度一緻
resetImgSizeW : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((h - height) / 2);
		img.style.marginTop = top + "px";
	} else if (nwh < wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((height - h) / 2) * -1;
		img.style.marginTop = top + "px";
	} else {
		img.height = h;
		img.width = w;
	}
},

在這裡我們需要判斷圖檔原始尺寸的長寬比例以及容器的長寬比例之間的關系，如果高度富裕，那就相應将圖檔往上移動一定的像素，如果高度不足，就将圖檔往下移動相應的像素，至于其他的兩種情況也是同樣的邏輯，先看下處理後的效果：

使用JavaScript解決網頁圖檔拉伸問題

二、保證高度一緻

//原始寬度 原始高度 容器寬度 容器高度
//保證高度一緻
resetImgSizeH : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((width - w) / 2) * -1;
		img.style.marginLeft = left + "px";
	} else if (nwh < wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((w - width) / 2);
		img.style.marginLeft = left + "px";
	} else {
		img.height = h;
		img.width = w;
	}
}

使用JavaScript解決網頁圖檔拉伸問題

三、鋪滿顯示區域

//原始寬度 原始高度 容器寬度 容器高度
//鋪滿全屏
resetImgSizeWH : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((width - w) / 2) * -1;
		img.style.marginLeft = left + "px";
	} else if (nwh < wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((height - h) / 2) * -1;
		img.style.marginTop = top + "px";
	} else {
		img.height = h;
		img.width = w;
	}
},

使用JavaScript解決網頁圖檔拉伸問題

如何使用JS

上面對實作的邏輯以及最終的效果做了簡單的介紹，下面就介紹下如何使用。

<!-- 引用js腳本 -->
<script src="./js/imageLoad.js"></script>
<script>
	var imageLoad = new ImageLoad();
	//處理網站上所有的圖檔，下面三種隻能使用一種
	//imageLoad.initImg("w");//保證寬度一緻
	//imageLoad.initImg("h");//保證高度一緻
	//imageLoad.initImg("wh");//鋪滿顯示區域
	//處理單個圖檔，對于多個自己可以寫循環語句來實作
	imageLoad.setImgSize(document.getElementById("img1"), imageLoad.resetImgSizeW);
	imageLoad.setImgSize(document.getElementById("img2"), imageLoad.resetImgSizeW);
	imageLoad.setImgSize(document.getElementById("img3"), imageLoad.resetImgSizeH);
	imageLoad.setImgSize(document.getElementById("img4"), imageLoad.resetImgSizeH);
	imageLoad.setImgSize(document.getElementById("img5"), imageLoad.resetImgSizeWH);
	imageLoad.setImgSize(document.getElementById("img6"), imageLoad.resetImgSizeWH);
</script>

ImageLoad源碼

$(document).ready(function() { 
	new ImageLoad();
});

ImageLoad = function(){
	this.init();
};

ImageLoad.prototype = {
	init : function () {
//		this.initImg("w");
	},
	initImg : function(type) {
		var _this = this;
		var imgs = document.getElementsByTagName('img');
		for (var i=0; i<imgs.length; i++) {
			try {
				var img = imgs[i];
				if ("w" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeW);
				} else if ("h" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeH);
				} else if ("wh" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeWH);
				} 
			} catch(e) {
			}
		}
	},
	//原始寬度 原始高度 容器寬度 容器高度
	//保證高度一緻
	resetImgSizeH : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((width - w) / 2) * -1;
			img.style.marginLeft = left + "px";
		} else if (nwh < wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((w - width) / 2);
			img.style.marginLeft = left + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//原始寬度 原始高度 容器寬度 容器高度
	//保證寬度一緻
	resetImgSizeW : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((h - height) / 2);
			img.style.marginTop = top + "px";
		} else if (nwh < wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((height - h) / 2) * -1;
			img.style.marginTop = top + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//原始寬度 原始高度 容器寬度 容器高度
	//鋪滿全屏
	resetImgSizeWH : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((width - w) / 2) * -1;
			img.style.marginLeft = left + "px";
		} else if (nwh < wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((height - h) / 2) * -1;
			img.style.marginTop = top + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//擷取圖檔真實尺寸以及容器尺寸
	setImgSize : function(img, callback) {
		if (img.naturalWidth) { //html5
			callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
		} else { // IE 6 7 8
			var imgae = new Image();
			image.src = img.src;
			image.onload = function() {
	            callback(img, image.width, image.height, img.width, img.height);
	        }
		}
	},
}

上面代碼還有很多可以優化的地方，歡迎大家在評論區留言交流

-------------------------------------------------------------------------------------------------

小福利

-------------------------------------------------------------------------------------------------

個人在極客學院上《Lucene案例開發》課程已經上線了，歡迎大家吐槽~

第一課：Lucene概述

第二課：Lucene 常用功能介紹

第三課：網絡爬蟲

第四課：資料庫連接配接池

第五課：小說網站的采集

第六課：小說網站資料庫操作

第七課：小說網站分布式爬蟲的實作

第八課：Lucene實時搜尋

第九課：索引的基礎操作

使用JavaScript解決網頁圖檔拉伸問題

繼續閱讀

Java String.format方法的簡單使用

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method