UIWebView改变HTML中图片的大小，进行等比例缩放

http://www.lanou3g.com/bbs/forum.php?mod=viewthread&tid=5189

现在越来越多的应用采用了Hybrid App（混合模式移动应用）这种开发模式，所以我们以后可能会越来越多的和UIWebView打交道。今天分享一个在在使用UIWebView加载HTML的时候很常见的一个问题。我们在使用UIWebView加载HTMLString的过程中，一般都很头疼HTML中图片的自适应，一般情况下，网页中的图片展示到UIWebView的过程中都需要调整图片的大小，网上常见的代码如下：

[Objective-C] 纯文本查看 复制代码

?

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中图片的效果了。