使用 evaluateJavascript 方法在 Cordova 的 WKWebview 上设置本地图像

Posted 2023-03-12

【中文标题】使用 evaluateJavascript 方法在 Cordova 的 WKWebview 上设置本地图像

【英文标题】：Setting local image on Cordova's WKWebview using evaluateJavascript method

【发布时间】：2021-02-11 13:44:36

【问题描述】：

我有一个 html 文件，其中包含本地资源文件，例如 CSS、js 文件。这些本地资源文件为 zip 格式。我的应用程序使用 Cordova 的 WKWebView 来显示这个 HTML 文件。我正在尝试在 Cordova 的 WKWebView 上的 HTML 图像元素之一中上传图像，该元素保存在本地，并且 HTML 不会更新图像。我在本地 HTML 中有一个这样的 HTML 图像标签。

<img id='image' style='display: block; height: 100%; width:100%; margin:0 auto;' />

并且这个图片标签中加载的这个图片是在Cordova的WKWebview中加载本地HTML文件后生成的。生成图像后，我正在尝试使用像这样的评估 javascript 方法更新图像标签。

NSData *imageData = UIImagePNGRepresentation(image);
NSString *base64Str = [imageData base64EncodedStringWithOptions:0];     
NSString *js = [NSString stringWithFormat:@"document.getElementById('image-id').src='data:image/png;base64,%@'",base64Str];
[self.wkWebView evaluateJavaScript:js completionHandler:nil];

在正常的 WKWebView 上运行良好。我的方案是否有任何解决方法？提前致谢。

【问题讨论】：

您的应用程序是仅使用 Cordova WebView 作为嵌入，还是完整的 Cordova 应用程序？

它使用 Cordova WebView 作为嵌入。该应用程序包含本地和科尔多瓦位。

【参考方案1】：

从docs 看来，您需要使用CDVViewController 并通过该控制器引用webView。

我的理解是这个 webView 引用使用了 Cordova defaults 的 webview 引擎（截至 cordova-ios@6 默认为 WKWebView）。

否则，对于旧版本的 Cordova，您可能需要 manually specify 和 config.xml 中的 WKWebView。

【讨论】：

我只使用 CDVViewController 的 webview。这就是它最初加载 html 的方式。只是我无法在上面写图像。

没有具体的错误日志。我可以看到图像转换为 base64 字符串，并在评估 javascript 方法的完成处理程序上获得成功消息。