从 HTML 将图像加载到 UITextview/WKWebView

Posted

技术标签:

【中文标题】从 HTML 将图像加载到 UITextview/WKWebView【英文标题】:Loading Images into UITextview/WKWebView from HTML 【发布时间】:2018-08-08 19:23:02 【问题描述】:

尝试将包含图像的 html 内容加载到 UITextView 或 WKWebView 中(我只需要渲染它!)

但是,当我将 HTML 加载到 WKWebView 中时,图像不会加载,视图不会重新加载,并且在内容加载之前遵守自动布局约束:

相关代码在这里:

    webView.navigationDelegate = self
    webView.loadHTMLString(body, baseURL: nil)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 

    if webView.isLoading == false 
        webView.evaluatejavascript("document.body.scrollHeight", completionHandler:  [weak self] (result, error) in
            guard let safeSelf = self else return
            if let height = result as? CGFloat 
                print("height of webview: \(height)")
                webView.frame.size.height += height
                //Layout subviews?
            
        )
    


但是,使用 UITextView,根据accepted answer found here 我可以执行以下操作:

extension String 

var htmlToAttributedString: NSMutableAttributedString? 
    guard let data = data(using: .unicode) else  return NSMutableAttributedString() 
    do 
        return try NSMutableAttributedString(data: data, options: [.documentType: NSMutableAttributedString.DocumentType.html], documentAttributes: nil)
     catch 
        return NSMutableAttributedString()
    

并将其设置为:

textView.attributedText = htmlString.htmlToAttributedString

这在自动布局方面效果很好......仅适用于文本,但它不保留图像(甚至不显示图像将去哪里的指示),只保留文本。不是事件保留 html 使用的字体或字体大小。

我直接使用了该帖子中接受的答案,它不保留图像,即使 OP 要求保留图像。

a) 将内容加载到 WKWebView 并加载图像的正确方法是什么(我的传输安全性设置为允许此演示的任意加载)或 b) 在 UITextView 的 HTML 解析中保留图像?我直接得到了 html 而不是 URL。

编辑:出于测试目的,我在代码中硬编码了一个小示例 html,用于 UIWebView / WKWebView 以反映我从 API 调用中获得的部分内容。

let body = "<div class=\"media-attachment\"><a href=\"https://www.hnmagazine.com/2017/11/07/latinx-really-mean/\"><img src=\"https://testimages.weareher.com/feed/0/2018-08/t9Qc549F7uCtZdbdXx1ERLbXJN2EXIXVacouJDlX.png\"/></a><p class=\"media-caption\">via <a href=\"https://latinxontherise.podbean.com/\">Latinxontherise</a></p></div></div>"

【问题讨论】:

如果你有 HTML 但没有 URL,它来自本地文件吗?您需要将图像存储在您的项目中,而不是xcassets @Chris 这篇中篇文章提供了一个加载图像但不需要本地存储图像的演示。查看 OP 在 cmets 中的图像演示。 medium.com/swift2go/… 可能的替代方案:***.com/questions/24010035/… 【参考方案1】:

我建议你应该使用 UIWebView 来加载 HTMLString。记住 webView 的拖动委托,你只调用: your_webview.loadHTMLString(yourHTMLString, baseURL: nil) your_webview.scalesPageToFit = true

【讨论】:

UIWebview 已弃用,取而代之的是 WKWebview。在 ios 12 之后,对 UIWebview 的支持将会下降 我不知道这个信息,但我刚看到和你的问题一样的问题,在我使用 UIwebview 后,所有问题都解决了:) 刚试过UIwebview,高度渲染得很好,并且遵循自动布局,但仍然没有加载图像?图片 url 在我的浏览器中可以正常工作,或者如果我在应用程序的其他地方加载它 你能把你的stringHTML发给我吗? 查看编辑。添加了我正在尝试加载的 html 的一部分,其中包括其中一张图片【参考方案2】:

所以,图像没有加载,因为它们是 webP 图像,Apple 不支持 webP(因为它是 google 的东西)。

至于自动布局的东西,这里是基本的解决方案(WKWebView):

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 

    //A delay here is needed because didFinish does not guarantee content has finished displaying
    //Height can only be retrieve after display finishes - hence the delay.
    var height: CGFloat = 0.0
    dispatch_after(0.1, block: 
        height = webView.scrollView.contentSize.height

        webView.snp.makeConstraints(make in //I used SnapKit here, because that's how my repo is setup
            make.height.equalTo(height)
        )
        // If the the webview is in another view, update that view's frame with the height + the existing height of that view's frame.  For me, I had the webview as the header of a uitableview (the cells are user comments, where the header is the "post"):
        guard var headerFrame = self.tableView.tableHeaderView?.frame else return
        headerFrame.size.height = headerFrame.size.height + height
        self.header.frame = headerFrame
        self.tableView.tableHeaderView = self.header
    )

上面的代码对我来说非常可靠。我唯一需要的是使用 WKPreferences 设置最小字体,因为 WKWebview 不尊重 html 中存在的字体,并且禁用了滚动,因为这是调整其大小以匹配内容的关键。

【讨论】:

以上是关于从 HTML 将图像加载到 UITextview/WKWebView的主要内容,如果未能解决你的问题,请参考以下文章

将图像添加到 UITextView

如何将图像从 url 沿侧输入类型文件加载到 html5 画布?

核心数据,将数据加载到 UITextView

如何将 UI 对象(图像)添加到 UITextView 或 UITextField?

将rtf文件加载到Swift 2中的UITextView中

如何将菜单选项添加到 NSTextAttachment 弹出菜单是 UITextView?