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

来源：互联网发布：淘宝直播审核条件编辑：程序博客网时间：2024/05/16 18:11

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

0 0