ios js加载本地图片

在iOS开发中，使用JavaScript加载本地图片涉及到几个关键概念和技术点。以下是对这个问题的详细解答：

基础概念

WebView: iOS中的WebView组件（如WKWebView）允许你在应用内嵌入网页内容，并且可以与JavaScript进行交互。
File System Access API: 这是一个现代的Web API，允许网页读取用户选择的本地文件或目录。
Base64 Encoding: 将图片转换为Base64字符串，可以直接在HTML或CSS中使用。

类型与应用场景

静态图片: 应用内预置的图片资源。
用户上传的图片: 用户通过应用上传并希望在网页中查看的图片。

实现方法

方法一：使用File System Access API（适用于iOS 15及以上）

// 请求用户选择文件
const pickerOpts = {
    types: [
        {
            description: 'Images',
            accept: {
                'image/*': ['.png', '.jpg', '.jpeg'],
            },
        },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
};

window.showOpenFilePicker(pickerOpts).then(async (fileHandle) => {
    const file = await fileHandle.getFile();
    const contents = await file.text(); // 读取文件内容为Base64字符串
    const imgElement = document.createElement('img');
    imgElement.src = `data:image/png;base64,${contents}`;
    document.body.appendChild(imgElement);
});

方法二：通过WebView与原生代码交互

在Swift中：

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "imageLoader")
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        // 加载本地HTML文件
        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(url, allowingReadAccessTo: url)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "imageLoader", let imageURL = message.body as? String {
            // 加载图片逻辑
            let image = UIImage(named: imageURL)
            let base64String = image?.jpegData(compressionQuality: 1.0)?.base64EncodedString() ?? ""
            webView.evaluateJavaScript("receiveImage('\(base64String)')", completionHandler: nil)
        }
    }
}

在HTML/JavaScript中：

<!DOCTYPE html>
<html>
<head>
    <title>Image Loader</title>
    <script>
        function loadImage(imagePath) {
            window.webkit.messageHandlers.imageLoader.postMessage(imagePath);
        }

        function receiveImage(base64String) {
            const imgElement = document.createElement('img');
            imgElement.src = `data:image/png;base64,${base64String}`;
            document.body.appendChild(imgElement);
        }
    </script>
</head>
<body>
    <button onclick="loadImage('example')">Load Image</button>
</body>
</html>