UIWebView 中的资产目录图像

Posted 2023-02-23

【中文标题】UIWebView 中的资产目录图像

【英文标题】：Asset Catalog images inside a UIWebView

【发布时间】：2017-09-05 02:19:17

【问题描述】：

Xcode 9 在 ios 项目中使用矢量又向前迈进了一步。它显然会保留源 PDF，以便可以根据需要以完整质量生成图像。

我想知道是否可以从 UIWebView 内的 html 访问这些图像？

我可以想象三种可能的方法：

您在 HTML 或 CSS 中放置的一些魔法将被 iOS 识别和替换。例如：

<img src=Asset Name>

了解获取资产的命名方案。例如：

<img src="some/path/asset~ipad@3x">

将图像“渲染”到UIWebView之外并传入。

这些有可能吗？还有其他方法吗？

考虑到我们在矢量方面已经走了多远，如果不需要的话，我不希望必须预渲染每个图像变体并将它们打包到资产目录之外。

【参考方案1】：

今天我需要将 XCAsset's 中的 UIImage 渲染成 UIWebView。

我的要求是准备好合适的HTML，并将其加载到UIWebView中，如下所示

self.myWebView.loadHTMLString(html, baseURL: nil)

为了从XCAsset的加载图像，首先将图像加载到UIImage，然后将其转换回Base64 Encoding，然后将图像放入<img>标签。

代码如下所示

let redClockImage = UIImage.init(named: "clock-red")!
let imageData:Data =  UIImagePNGRepresentation(self)!
let base64String = imageData.base64EncodedString()

let html = """
           //my html
           <img src="data:image/png;base64, \(base64String)" />
           //rest of my html
           """

//then i load this html into the webview
self.myWebView.loadHTMLString(html, baseURL: nil)

为方便起见，我将UIImage -> Base64 String 转换为an extension。