ios+原生往html插图,iOS原生如何加载HTML中img标签的图片

原文出自：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