Display a downloaded blob image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}
And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.
this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});
this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});
So the next step is to display the image which is in the path this.file.dataDirectory + filename
, how can I do this?
After searching for a solution and reading I understand that I have to:
Load the file binary content.
Convert this binary content to base 64.
Then display it with
src="data:image/jpeg;base64,"+{{image_in_base64}};
But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?
javascript angular ionic-framework ionic3 blob
|
show 1 more comment
I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}
And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.
this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});
this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});
So the next step is to display the image which is in the path this.file.dataDirectory + filename
, how can I do this?
After searching for a solution and reading I understand that I have to:
Load the file binary content.
Convert this binary content to base 64.
Then display it with
src="data:image/jpeg;base64,"+{{image_in_base64}};
But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?
javascript angular ionic-framework ionic3 blob
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
@Mathyn I triedsrc={{full_path_image}}
, but it didn't work, that's what you mean?
– OiciTrap
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
@Mathyn Thethis.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I usesrc={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.
– OiciTrap
Jan 4 at 14:15
|
show 1 more comment
I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}
And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.
this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});
this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});
So the next step is to display the image which is in the path this.file.dataDirectory + filename
, how can I do this?
After searching for a solution and reading I understand that I have to:
Load the file binary content.
Convert this binary content to base 64.
Then display it with
src="data:image/jpeg;base64,"+{{image_in_base64}};
But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?
javascript angular ionic-framework ionic3 blob
I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}
And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.
this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});
this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});
So the next step is to display the image which is in the path this.file.dataDirectory + filename
, how can I do this?
After searching for a solution and reading I understand that I have to:
Load the file binary content.
Convert this binary content to base 64.
Then display it with
src="data:image/jpeg;base64,"+{{image_in_base64}};
But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?
javascript angular ionic-framework ionic3 blob
javascript angular ionic-framework ionic3 blob
edited Jan 4 at 13:39
OiciTrap
asked Jan 4 at 13:31
OiciTrapOiciTrap
1,06921233
1,06921233
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
@Mathyn I triedsrc={{full_path_image}}
, but it didn't work, that's what you mean?
– OiciTrap
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
@Mathyn Thethis.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I usesrc={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.
– OiciTrap
Jan 4 at 14:15
|
show 1 more comment
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
@Mathyn I triedsrc={{full_path_image}}
, but it didn't work, that's what you mean?
– OiciTrap
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
@Mathyn Thethis.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I usesrc={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.
– OiciTrap
Jan 4 at 14:15
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
@Mathyn I tried
src={{full_path_image}}
, but it didn't work, that's what you mean?– OiciTrap
Jan 4 at 14:09
@Mathyn I tried
src={{full_path_image}}
, but it didn't work, that's what you mean?– OiciTrap
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
@Mathyn The
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.– OiciTrap
Jan 4 at 14:15
@Mathyn The
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.– OiciTrap
Jan 4 at 14:15
|
show 1 more comment
2 Answers
2
active
oldest
votes
Following is the code that worked for me.
<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>
Then in your typescript code.
@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}
UPDATE - If you are using Ionic Native File or Cordova File Plugin
Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.
Where do I put thefile path
?
– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
add a comment |
At the end it was easier and faster to use LocalStorage instead of files
First I made the function download_save_picture(picture_url)
which save the content of the image in picture_url
in Base64 in localStorage(key)
, the key will be everything after the last /
, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg
the content will be saved in icon.img_lights.jpg
.
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();
reader.readAsDataURL(data);
reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}
Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>
, where useLocalImage
simply returns the content saved in localStorage.
useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
var icon_name = window.localStorage.getItem('icon.' + name);
return icon_name;
}
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54039937%2fdisplay-a-downloaded-blob-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Following is the code that worked for me.
<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>
Then in your typescript code.
@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}
UPDATE - If you are using Ionic Native File or Cordova File Plugin
Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.
Where do I put thefile path
?
– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
add a comment |
Following is the code that worked for me.
<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>
Then in your typescript code.
@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}
UPDATE - If you are using Ionic Native File or Cordova File Plugin
Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.
Where do I put thefile path
?
– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
add a comment |
Following is the code that worked for me.
<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>
Then in your typescript code.
@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}
UPDATE - If you are using Ionic Native File or Cordova File Plugin
Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.
Following is the code that worked for me.
<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>
Then in your typescript code.
@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}
UPDATE - If you are using Ionic Native File or Cordova File Plugin
Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.
edited Jan 5 at 8:45
answered Jan 4 at 14:12
Ahmed ShabibAhmed Shabib
3621613
3621613
Where do I put thefile path
?
– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
add a comment |
Where do I put thefile path
?
– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
Where do I put the
file path
?– OiciTrap
Jan 4 at 14:30
Where do I put the
file path
?– OiciTrap
Jan 4 at 14:30
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.
– Ahmed Shabib
Jan 5 at 8:35
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL
– Ahmed Shabib
Jan 5 at 8:39
add a comment |
At the end it was easier and faster to use LocalStorage instead of files
First I made the function download_save_picture(picture_url)
which save the content of the image in picture_url
in Base64 in localStorage(key)
, the key will be everything after the last /
, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg
the content will be saved in icon.img_lights.jpg
.
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();
reader.readAsDataURL(data);
reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}
Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>
, where useLocalImage
simply returns the content saved in localStorage.
useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
var icon_name = window.localStorage.getItem('icon.' + name);
return icon_name;
}
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
add a comment |
At the end it was easier and faster to use LocalStorage instead of files
First I made the function download_save_picture(picture_url)
which save the content of the image in picture_url
in Base64 in localStorage(key)
, the key will be everything after the last /
, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg
the content will be saved in icon.img_lights.jpg
.
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();
reader.readAsDataURL(data);
reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}
Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>
, where useLocalImage
simply returns the content saved in localStorage.
useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
var icon_name = window.localStorage.getItem('icon.' + name);
return icon_name;
}
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
add a comment |
At the end it was easier and faster to use LocalStorage instead of files
First I made the function download_save_picture(picture_url)
which save the content of the image in picture_url
in Base64 in localStorage(key)
, the key will be everything after the last /
, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg
the content will be saved in icon.img_lights.jpg
.
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();
reader.readAsDataURL(data);
reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}
Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>
, where useLocalImage
simply returns the content saved in localStorage.
useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
var icon_name = window.localStorage.getItem('icon.' + name);
return icon_name;
}
At the end it was easier and faster to use LocalStorage instead of files
First I made the function download_save_picture(picture_url)
which save the content of the image in picture_url
in Base64 in localStorage(key)
, the key will be everything after the last /
, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg
the content will be saved in icon.img_lights.jpg
.
download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };
this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();
reader.readAsDataURL(data);
reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}
Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>
, where useLocalImage
simply returns the content saved in localStorage.
useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];
var icon_name = window.localStorage.getItem('icon.' + name);
return icon_name;
}
answered Jan 7 at 15:16
OiciTrapOiciTrap
1,06921233
1,06921233
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
add a comment |
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
When doing this please keep in my mind limits apply to localstorage. See this question for some more info.
– Mathyn
Jan 8 at 8:13
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54039937%2fdisplay-a-downloaded-blob-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?
– Mathyn
Jan 4 at 14:02
@Mathyn I tried
src={{full_path_image}}
, but it didn't work, that's what you mean?– OiciTrap
Jan 4 at 14:09
Did you get any errors when doing this? e.g. a 404 or something else?
– Mathyn
Jan 4 at 14:09
For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…
– andrea06590
Jan 4 at 14:13
@Mathyn The
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
doesn't work in a browser so I have to test iit in an actual Android device. In my case when I usesrc={{full_path_image}}
the entire Page is not even displayed, but removing that makes everything work fine.– OiciTrap
Jan 4 at 14:15