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