如何在使用wkwebview时使用cordova在img标签中显示摄像头图像

Question

该应用程序使用cordova-ios版本6.0.0。所以所有的WkWebView代码。

当用户使用cordova- plugin -camera插件选择一个图像时，我将返回的图像uri设置为img标记的src，这会触发一个错误，因为uri以file://开头：

不允许加载本地资源:file:///xxx/xxx.jpg

如何使用wkwebview和cordova-ios版本6显示所选图像？

编辑:我已经尝试了无数的东西，但我不能让它工作。我正在使用WkURLSchemeHandler，我将config.xml中的首选项设置为here建议的应用程序和本地主机

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

我看到摄像头插件返回的文件:// url存储在tmp文件夹中。所以我试着用app://localhost访问它，但我得到了404错误：

var pos = photoURI.indexOf('/tmp');
if(pos >=0){
    photoURI = 'app://localhost' + photoURI.substr(pos);
}

任何想法都将非常受欢迎。

谢谢。

Answer 1

app://localhost仅为www资产提供服务。

解决方案1：

使用此插件https://github.com/communico/cordova-httpd在应用程序内部启动本地服务器

cordova.plugins.CorHttpd.startServer({
    'www_root': cordova.file.dataDirectory.replace( 'file://', '' ),
    'port': 8080,
    'localhost_only': false
}, function( url ){
    // eg. http://10.0.0.185:8080/
    // if localhost_only is true，then url is http://127.0.0.1:8080/
    console.log(url);
}, function( error ){
    console.log(error);
});

例如，如果文件路径类似于：file:///data/user/0/com.pushsoft.aio5app/files/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

您可以使用以下url来显示图像：http://127.0.0.1:8080/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

解决方案2：

你可以把图片放在file:///var/mobile/Containers/Data/Application/<UUID>/tmp/中，<img>只能通过'file://‘协议’显示这个目录中的图片