1. 程式人生 > >ios UIWebView中如何讓圖片大小適應螢幕寬度

ios UIWebView中如何讓圖片大小適應螢幕寬度

1.採用在html的head中加mata標籤
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
缺點:整個頁面都會被縮小來適應螢幕寬度。


2.遍歷html中的img 標籤,通過img標籤中src值來下載圖片以獲取圖片的寬高。在按照一定寬高比得到適應螢幕的寬和高之後,重新定義img標籤(加上width和height)
缺點:html內容太大會影響遍歷速速,要求對img標籤的匹配精確到高和快。(注:圖片下載不一定是要整個圖片都下載完之後才能獲取圖片的實際寬高大小!)
有點:真正的實現按照原本圖片寬高比來縮放適應螢幕大小。


3.通過新增js來自動修改圖片的大小。
優點:效果和瀏覽網頁的效果是一致的(會非同步載入圖片,不影響使用者體驗),圖片一旦載入完畢會自動按照比例來調整圖片寬高。

缺點:no!

程式碼:

<script >
//自動調整大小
function AutoResizeImage(maxWidth,maxHeight,objImg){
	var img = new Image();
	img.src = objImg.src;
	var hRatio;
	var wRatio;
	var Ratio = 1;
	var w = img.width;
	var h = img.height;
	wRatio = maxWidth / w;
	hRatio = maxHeight / h;
	if (maxWidth ==0 && maxHeight==0){
		Ratio = 1;
	}else if (maxWidth==0){//
		if (hRatio<1) Ratio = hRatio;
		}else if (maxHeight==0){
			if (wRatio<1) Ratio = wRatio;
	}else if (wRatio<1 || hRatio<1){
		Ratio = (wRatio<=hRatio?wRatio:hRatio);
	}
	if (Ratio<1){
		w = w * Ratio;
		h = h * Ratio;
	}
	objImg.height = h;
	objImg.width = w;
}
function AutoResizeAllImage(maxWidth)
{
	document.write("This document contains: ")
	document.write(document.images.length + " images.<br\>")
	for(i=0; i<document.images.length ;i++)
	{	
		action = "AutoResizeImage("+maxWidth +",0,this)"
		thisImg = document.images[i];

		thisImg.setAttribute("onload", action)
	}
	
}

//呼叫
AutoResizeAllImage(320);
</script>



其他.UIWebview 讀取圖片的3中方法:
1)常用寫法
<img src="http://images.cnblogs.com/logo.png" />
優點:在html顯示的時候圖片會非同步載入,也就是說你會先看到html中的文字,而圖片會一點點顯示出來
2)data URL寫法
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
必須等圖片轉換成data之後,才能載入html顯示圖片。
缺點:通過使用img標籤的data: image/jpeg;base64 屬性來新增圖片的data。缺點:當圖片較多以及圖片比較大的時候,轉換出來的data會特別特別長!
3)使用相對路徑的寫法:
<img src="img/logo.png" />
缺點:圖片必須在Bundle Resources目錄下,也就是說必須在app打包之前就要包含這個圖片存在bundle resource中。
優點:在css中指定圖片樣式,採用該方法最合適了!


4)使用絕對路徑file://的寫法
<img src="file://路徑">  路徑是指本地路徑。
這種方法是讀取本地路徑的圖片來。常用之處就是:當你第一次向網路請求圖片之後,你可以把圖片快取起來,下次不用再次請求網路!
那麼,如果在ios上使用UIWebview來讀取載入本地圖片呢? 
通過把下載的圖片儲存在沙盒目錄下,在loadHTMLString函式中中,指定baseURL為沙盒目錄即可!
(void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL 

如有其它看法的同學,請多多指教!