原文出自:iOS原生如何加载HTML中img标签的图片
前言
最近iOS App项目中使用Webview加载H5页面比较多,也有不少朋友经常问到这个问题,在这里我也学习学习如何通过iOS原生的方式来加载H5页面中的图片然后让webview显示图片。
相信有很多朋友也遇到过这样的问题,可是很多朋友都没有思路,不知如何入手。今天,刚好学习了一下,并写了一个简单的demo。下面让我们一起来学习一下吧!
本篇文章适合哪些人群阅读?
项目中有类似需求的,而又没有思路的
曾经做过类似需求的,可以参考两者的思想有何异同,比较哪种方式更好
没有做过类似需求,且也没有思路入手的,可以参考学习
注意:本文有Objective-C版和Swift,根据个人情况看相关章节
思路讲解
这里有两种方式可以实现:
直接使用NSData同步加载图片的方式(Swift版用同步实现)
通过其他第三方库异步加载图片的方式(ObjC版用异步实现)
Swift版代码讲解
下面看看我们的核心代码吧:
let path = NSBundle.mainBundle().pathForResource("test", ofType: "html")
let url = NSURL(fileURLWithPath: path!)
do {
let html = try String(contentsOfURL: url, encoding: NSUTF8StringEncoding)
// print(html)
// 获取所有img src中的src链接,并将src更改名称
// 这里直接采用同步获取数据,异步也是一样的道理,为了方便写demo,仅以同步加载图片为例。
// 另外,这不考虑清除缓存的问题。
do {
let regex = try NSRegularExpression(pattern: "]*/>", options: .AllowCommentsAndWhitespace)
let result = regex.matchesInString(html, options: .ReportCompletion, range: NSMakeRange(0, html.characters.count))
var content = html as NSString
var sourceSrcs: [String: String] = ["": ""]
for item in result {
let range = item.rangeAtIndex(0)
let imgHtml = content.substringWithRange(range) as NSString
var array = [""]
if imgHtml.rangeOfString("src=\"").location != NSNotFound {
array = imgHtml.componentsSeparatedByString("src=\"")
} else if imgHtml.rangeOfString("src=").location != NSNotFound {
array = imgHtml.componentsSeparatedByString("src=")
}
if array.count >= 2 {
var src = array[1] as NSString
if src.rangeOfString("\"").location != NSNotFound {
src = src.substringToIndex(src.rangeOfString("\"").location)
// 图片链接正确解析出来
print(src)
// 加载图片
// 这里不处理重复加载的问题,实际开发中,应该要做一下处理。
// 也就是先判断是否已经加载过,且未清理掉该缓存的图片。如果
// 已经缓存过,否则才执行下面的语句。
let data = NSData(contentsOfURL: NSURL(string: src as String)!)
let localUrl = self.saveImageData(data!, name: (src as String).md5)
// 记录下原URL和本地URL
// 如果用异步加载图片的方式,先可以提交将每个URL起好名字,由于这里使用的是原URL的md5作为名称,
// 因此每个URL的名字是固定的。
sourceSrcs[src as String] = localUrl
}
}
}
for (src, localUrl) in sourceSrcs {
if !localUrl.isEmpty {
content = content.stringByReplacingOccurrencesOfString(src as String, withString: localUrl, options: NSStringCompareOptions.LiteralSearch, range: NSMakeRange(0, content.length))
}
}
print(content as String)
webView.loadHTMLString(content as String, baseURL: url)
} catch {
print("match error")
}
} catch {
print("load html error")
}
此处省略1000字,完整阅读文章内容,请移步微信公众号阅读。
移步微信公众号阅读全文
源代码
想要下载源代码,请移步github下载,内有Swift版的工程和ObjC版的工程:
https://github.com/CoderJackyHuang/iOSLoadWebViewImage
公众号搜索「iOS开发技术分享」快速关注微信号:iOSDevShares QQ群:324400294