我的（cordova）应用程序应从远程下载图像，将其存储在本地文件系统上并显示它。下载和存储是没有问题的。创建图像并设置源属性。但是我将使用什么类型的URL，不显示图像。我尝试在本机设备上为IOS工作。
的index.html：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<title>The App</title>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval' https://www.adomain.de; style-src 'self' 'unsafe-inline' https://www.adomain.de; media-src *; script-src 'self' 'unsafe-eval' https://adomain.de; connect-src 'self' https://www.adomain.de; font-src 'self' data: https://www.adomain.de; img-src * filesystem: data: cdvfile:">
</head>
<body>
<div id="links"></div>
<script type="text/javascript" src="public/js/test/test.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
test.js：
var oRessources = {
ressourcesDir:false,
init:function(){
function initFS(success){
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 0, function (fs) {
success();
});
}
initFS(oRessources.createRessourcesDir);
},
createRessourcesDir:function(){
resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dirEntry){
console.log('datadirectory');
console.log(dirEntry);
dirEntry.getDirectory(
'ressources/',
{create:true},
function(dirEntry){
oRessources.ressourcesDir = dirEntry;
oRessources.download();
},
function(error){
console.log('error');
console.log(error)
}
);
},
function(dirEntry){
console.log('error');
}
);
},
download:function(){
var target = "e44498f0b0964152632bd0c82342914b859c543e.jpeg"
oRessources.ressourcesDir.getFile(
target,
{ create: true, exclusive: false },
function (fileEntry) {
console.log('file created');
console.log(fileEntry);
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://www.adomain.de/api/public/content_images/"+target, true);
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response;
if (blob) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function (e) {
fileEntry.getMetadata(function(meta){
console.log(meta);
}, function(error){
});
var link = document.createElement("A");
link.appendChild(document.createTextNode(fileEntry.toInternalURL()));
link.href = fileEntry.toInternalURL();
document.getElementById('links').appendChild(link);
var image = document.createElement("IMG");
image.src = fileEntry.toInternalURL();
document.getElementById('links').appendChild(image);
var link2 = document.createElement("A");
link2.appendChild(document.createTextNode(fileEntry.toURL()));
link2.href = fileEntry.toURL();
document.getElementById('links').appendChild(link2);
var image2 = document.createElement("IMG");
image2.src = fileEntry.toURL();
document.getElementById('links').appendChild(image2);
var link3 = document.createElement("a");
link3.appendChild(document.createTextNode(fileEntry.toURL().replace("///", "//") ));
link3.href = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(link3);
var image3 = document.createElement("IMG");
image3.src = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(image3);
link4 = document.createElement("A");
link4.appendChild(document.createTextNode(fileEntry.fullPath ));
link4.href = fileEntry.fullPath;
document.getElementById('links').appendChild(link4);
var image4 = document.createElement("IMG");
image4.src = fileEntry.fullPath;
document.getElementById('links').appendChild(image4);
console.log(blob);
link5 = document.createElement("A");
link5.appendChild(document.createTextNode(window.URL.createObjectURL(blob) ));
link5.href = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(link5);
var image5 = document.createElement("IMG");
image5.src = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(image5);
var readerBlob = new FileReader();
readerBlob.onload = function(event){
console.log('dataURL2');
//console.log(readerBlob.result);
var image6 = document.createElement("IMG");
image6.src = readerBlob.result;
document.getElementById('links').appendChild(image6);
};
console.log('dataURL1');
readerBlob.readAsDataURL(blob);
};
fileWriter.onerror = function (e) {
// you could hook this up with our global error handler, or pass in an error callback
console.log('Write failed: ' + e.toString());
};
fileWriter.write(blob);
});
} else console.error('we didnt get an XHR response!');
};
oReq.onerror = function (oEvent) {
if(oRessources.loadingStack.length > 0){
//oRessources.download();
}else{
oRessources.loading = false;
}
}
oReq.send(null);
},
function (error) {
console.log('error creating file');
console.log(error);
}
);
}
};
document.addEventListener("deviceready", function(){
console.log('DEVICE READY');
oRessources.init();
}, false);
window.onerror = function(message, url, lineNumber){
console.log('Error: '+message+' in '+ url + ' at line '+lineNumber);
}
config.xml中：
<?xml version='1.0' encoding='utf-8'?>
<widget id="de.app.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="mail@nils-fett.de" href="http://www.adomain.de">
Nils Fett
</author>
<content src="index.html" />
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<splash height="1024" src="lobbe-logo-768x1024.png" width="768" />
<splash height="2048" src="lobbe-logo-1536x2048.png" width="1536" />
<splash height="1536" src="lobbe-logo-2048x1536.png" width="2048" />
</platform>
<preference name="DisallowOverscroll" value="true" />
<preference name="Orientation" value="default" />
<preference name="BackupWebStorage" value="local" />
<preference name="iosPersistentFileLocation" value="library" />
<preference name="AutoHideSplashScreen" value="true" />
<feature name="File">
<param name="ios-package" value="CDVFile" />
</feature>
<feature name="FileTransfer">
<param name="ios-package" value="CDVFileTransfer" />
</feature>
<icon src="lobbe.png" />
<plugin name="cordova-plugin-console" spec="~1.1.0" />
<plugin name="cordova-plugin-device" spec="~2.0.1" />
<plugin name="cordova-plugin-email-composer" spec="~0.8.11" />
<plugin name="cordova-plugin-file" spec="~6.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="~2.0.1" />
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="~5.0.1" />
<plugin name="cordova-plugin-webserver" spec="~1.0.3" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<engine name="ios" spec="~4.2.1" />
</widget>
我认为它在新的IOS版本中添加了一种限制。我听说过WKWebView的一个问题，但是线程认为应该解决这个问题。有什么想法吗？
更新：
很抱歉，cordova或iOS或文件系统没有问题。问题是，图像URL被重定向到html页面。所以我下载了HTML并尝试将其作为图像发送。代码有效。 toInternalURL，toURL，createObjectURL和readAsDataURL完美无缺。
答案 0 :(得分：0)
很抱歉，cordova或iOS或文件系统没有问题。问题是，图像URL被重定向到html页面。所以我下载了HTML并尝试将其作为图像发送。代码有效。 toInternalURL，toURL，createObjectURL和readAsDataURL完美无缺。