GitToTheHub commented on issue #1607:
URL: https://github.com/apache/cordova-ios/issues/1607#issuecomment-3955054910
I tested it and it worked. I used the fetch-api to get the image and stored
it to `cordova.file.dataDirectory`. After that I read the file with
`FileReader.readAsDataURL`, which already gives the correct data url for an
image tag and set it. You don't need the file URL to set the image to an image
tag.
index.js
```js
document.addEventListener('deviceready', onDeviceReady, false);
async function onDeviceReady() {
console.log('Running cordova-' + cordova.platformId + '@' +
cordova.version);
// Get image as blob from URL and write it to file system
const blob = await
fetchData("https://cordova.apache.org/static/img/cordova_bot.png";);
writeData("cordova_bot.png", blob, function(fileEntry) {
console.log("File write successful: " + JSON.stringify(fileEntry));
readFile("cordova_bot.png", function(dataUrl) {
displayImage(dataUrl);
}, function(error) {
console.log("File read failed: " + error.toString());
});
}, function(error) {
console.log("File write failed: " + error.toString());
});
}
async function fetchData(url) {
console.log("Fetching image from URL: " + url);
try {
const response = await fetch(url);
if (!response.ok) {
console.error("Failed to fetch image, status: " + response.status);
throw new Error(`Response status: ${response.status}`);
}
console.log("Image fetched successfully, status: " + response.status);
return response.blob();
} catch (error) {
console.error("Error fetching image: " + error.toString());
}
}
function getFileEntry(filename, successCallback, errorCallback) {
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function
(fileEntry) {
console.log('cordova.file.dataDirectory resolved: ' +
JSON.stringify(fileEntry));
fileEntry.getFile(filename, { create: true, exclusive: false },
function (fileEntry) {
successCallback(fileEntry);
}, (fileError) => {
console.log("Error creating file: " + fileError);
errorCallback(fileError);
});
}, (fsError) => {
console.log("Error requesting file system: " + fsError);
errorCallback(fsError);
});
}
function writeData(filename, blob, successCallback, errorCallback) {
getFileEntry(filename, function (fileEntry) {
// Create a FileWriter object for our FileEntry (image.png).
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwrite = function() {
console.log("Successful file write...");
successCallback(fileEntry);
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
errorCallback(e);
};
fileWriter.write(blob);
});
}, errorCallback);
}
function readFile(filename, successCallback, errorCallback) {
getFileEntry(filename, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function() {
console.log("Successful file read as data URL:" +
this.result);
if (successCallback) {
successCallback(this.result);
}
};
reader.readAsDataURL(file);
}, function (fileError) {
console.log("Error reading file: " + fileError.toString());
if (errorCallback) {
errorCallback(fileError);
}
});
}, errorCallback);
}
function displayImage(dataUrl) {
console.log("Displaying image with data URL: " + dataUrl);
const img = document.getElementById('myImage');
img.src = dataUrl;
}
```
On index.html, you have to add for this example `https://cordova.apache.org`
to the CSP, so you can get the image by fetch:
```html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:
https://ssl.gstatic.com 'unsafe-eval' https://cordova.apache.org; ...">
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://cordova.apache.org/static/img/cordova_bot.png"](https://cordova.apache.org/static/img/cordova_bot.png"){kind=link}