这个实现难点在缓存图片上。HTML代码的缓存对你来说不是问题吧。基于这个前提,
下面这个方案是我自己做的,也具体在项目实现了。思路是这样的:
第1步、先获取html页面里所有图片地址。
方法一:离线获取获取到HTML代码。HTML代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的所有img标签url。如果是相对url,就加上host。如果是绝对url,就直接下载。这样这个页面里的所有图片路径都拿到了。
方法一的获取img标签url的正则表达式:
Nsstring *urlPattern = @"<img[^>]+?src=[\"']?([^>'\"]+)[\"']?";
方法二:通过webview和js 本地程序的交换,获取到html页面所有图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下:
第2步、把下载图片到本地,把本地的图片设置到HTML代码中去显示。
通过上面说的两个方法,你可以获取到图片地址了并且能下载到本地了。那没网络的情况下怎么把这些图片再设置到html页面里呢?
方法:下载到本地的图片命名一律使用图片url的md5。因为url直接做不了图片的名称。
下面这段代码演示了下载图片和设置本地图片的全过程。代码的逻辑是:有本地图片,就显示本地图片,如果没有则从网络获取。还有对应的js代码。设置图片是还判断图片的宽度,大于300时,就等比例缩小。
下面这个方案是我自己做的,也具体在项目实现了。思路是这样的:
第1步、先获取html页面里所有图片地址。
方法一:离线获取获取到HTML代码。HTML代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的所有img标签url。如果是相对url,就加上host。如果是绝对url,就直接下载。这样这个页面里的所有图片路径都拿到了。
方法一的获取img标签url的正则表达式:
Nsstring *urlPattern = @"<img[^>]+?src=[\"']?([^>'\"]+)[\"']?";
方法二:通过webview和js 本地程序的交换,获取到html页面所有图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下:
1
2
3
4
5
6
7
8
9
10
11
|
//获取web里的所有的img url
Nsstring
*js = @
"var imgArray = document.getElementsByTagName('img'); var imgstr = ''; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ';';} return imgstr; } f();"
;
return
js;
}
Nsstring
*js = @
"var imgArray = document.getElementsByTagName('img');function f(){ var num=imgArray.length;return num;} f();"
;
return
js;
}
|
第2步、把下载图片到本地,把本地的图片设置到HTML代码中去显示。
通过上面说的两个方法,你可以获取到图片地址了并且能下载到本地了。那没网络的情况下怎么把这些图片再设置到html页面里呢?
方法:下载到本地的图片命名一律使用图片url的md5。因为url直接做不了图片的名称。
下面这段代码演示了下载图片和设置本地图片的全过程。代码的逻辑是:有本地图片,就显示本地图片,如果没有则从网络获取。还有对应的js代码。设置图片是还判断图片的宽度,大于300时,就等比例缩小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
- (
void
)downLoadImageFromURL:(
NSArray
* )imageUrlArray
{
for
(
int
i = 0; i < imageUrlArray.count; i++)
{
NSData
*data = [FTWCache objectForKey:key];
NSURL
*imageURL = [
NSURL
URLWithString:imageUrl];
if
(data) {
imgurl:key]];
}
else
{
dispatch_group_async(group, queue, ^{
NSData
*data = [
NSData
dataWithContentsOfURL:imageURL];
if
(data !=
nil
) {
[FTWCache setobject:data forKey:key];
imgurl:key]];
DDLOG(@
"image i %d"
,i);
});
}
});
}
}
});
dispatch_release(group);
}
//设置下载完成的图片到web img
NSData
*imageData = [FTWCache objectForKey:url];
UIImage
*image = [
UIImage
imageWithData:imageData];
int
imageWidth = 300;
int
imageHeight = image.size.height*300.0f/image.size.width;
Nsstring
*js = [
Nsstring
stringWithFormat:@
"var imgArray = document.getElementsByTagName('img'); imgArray[%@].src=\"%@\"; imgArray[%@].width=\"%d\";imgArray[%@].height=\"%d\" ;"
, index, url,imageWidth,index,imageHeight];
return
js;
}
|