Swift 4中如何将UIImage加载到WKWebView？替代URL加载方式

Great question! Since WKWebView is designed to load web content rather than raw UIImage instances directly, we can work around this by embedding your image in a simple HTML string using base64 encoding. Here's how to update your Swift 4 code:

Modified Code #

import UIKit
import WebKit

class YourWebViewController: UIViewController, WKUIDelegate {
    var webView: WKWebView!
    // Replace this with your actual *UIImage* (e.g., from assets, camera, etc.)
    let targetImage = UIImage(named: "your_image_name")!

    override func loadView() {
        // Your existing loadView code stays the same!
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Step 1: Convert *UIImage* to base64-encoded string
        guard let imageData = targetImage.pngData() else {
            print("Oops, failed to convert image to data!")
            return
        }
        let base64Image = imageData.base64EncodedString()
        
        // Step 2: Create HTML to display the image (with responsive styling)
        let htmlString = """
        <html>
            <head>
                <style>
                    body { margin: 0; padding: 0; background-color: #fff; }
                    img { width: 100%; height: auto; object-fit: contain; }
                </style>
            </head>
            <body>
                <img src="data:image/png;base64,\(base64Image)" />
            </body>
        </html>
        """
        
        // Step 3: Load the HTML into *WKWebView*
        webView.loadHTMLString(htmlString, baseURL: nil)
    }
}

Key Details: #

• Base64 Conversion: We turn the UIImage into PNG data (use jpegData(compressionQuality: 0.8) instead if you want smaller file size) and encode it to a base64 string. This lets us embed the image directly in HTML without needing an external URL.
• Responsive Styling: The CSS ensures the image fits perfectly in the web view, scales with the screen, and has no unwanted margins.
• Error Handling: The guard statement catches cases where image-to-data conversion fails (rare, but good practice to avoid crashes).

Just replace UIImage(named: "your_image_name")! with your actual UIImage instance—whether it's from your asset catalog, the camera, or a file on disk.

内容的提问来源于stack exchange，提问作者husharoonie