UIWebView改變HTML中圖片的大小，進行等比例縮放
阿新 • • 發佈：2019-01-23
http://www.lanou3g.com/bbs/forum.php?mod=viewthread&tid=5189
現在越來越多的應用採用了Hybrid App（混合模式移動應用）這種開發模式，所以我們以後可能會越來越多的和UIWebView打交道。今天分享一個在在使用UIWebView載入HTML的時候很常見的一個問題。我們在使用UIWebView載入HTMLString的過程中，一般都很頭疼HTML中圖片的自適應，一般情況下，網頁中的圖片展示到UIWebView的過程中都需要調整圖片的大小，網上常見的程式碼如下：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 |
// 攔截網頁圖片 並修改圖片大小
[webView stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth=300;"
// UIWebView中顯示的圖片寬度
"for(i=0;i <document.images.length;i++){""myimg = document.images;"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"myimg.height = myimg.height * (maxwidth/oldwidth);"
// 導致我們計算錯誤的地方
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
|
但是我們在使用這個方法的過程中，會出現圖片的寬度是我們設定的寬度，但是圖片的高度比我們想得到的高度要小，最終的效果是圖片被壓縮了，達不到我們等比例縮放的效果。
這是因為在HTML中，如果你更改了圖片的高度（寬度）之後，圖片的寬度（高度）會自己進行等比例的縮放，如果我們設定圖片的寬和高，那麼圖片的寬和高就是我們設定的值。
舉例來說，比如網頁裡面的圖片的寬高是600*400，如果我們在上面的程式碼中把圖片寬度設定成300，那麼這個時候圖片的高自動就變成了200，如果我們在使用上面的程式碼，乘以我們計算到的縮放係數也就是2/3，那麼最後圖片的高度就是200 * 0.666667，這樣我們最後看到圖片就被壓縮了。
如果想要得到正確的高度，那麼只需要使用下面的程式碼：
[Objective-C] 純文字檢視 複製程式碼 ?
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 |
[webView stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth = 300.0;"
// UIWebView中顯示的圖片寬度
"for(i=0;i <document.images.length;i++){"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
|
這樣就能達到我們等比例縮放HTML中圖片的效果了。