My function returns a blob object when I log it in my console:
Blob(623853) {name: "profile.jpg", size: 623853, type: "image/jpeg"}
I want to display this image to the user with JavaScript, how can I do it?
My function returns a blob object when I log it in my console:
Blob(623853) {name: "profile.jpg", size: 623853, type: "image/jpeg"}
I want to display this image to the user with JavaScript, how can I do it?
Share Improve this question edited Aug 8, 2018 at 22:00 AmericanUmlaut 2,8372 gold badges18 silver badges28 bronze badges asked Aug 8, 2018 at 21:37 Mehmet Ali PekerMehmet Ali Peker 7211 gold badge7 silver badges20 bronze badges 3- you can probably create an img element on the page, and make the src attribute the image path. That should display the image. But you'll need the full path, not sure if 'profile.jpg' is enough. Also see this answer as it has more details: stackoverflow.com/questions/7650587/… – Abdul Ahmad Commented Aug 8, 2018 at 21:41
- ı don't know full path of image, image is creating with js using canvas, and convert to blob – Mehmet Ali Peker Commented Aug 8, 2018 at 21:43
- Possible duplicate of Using Javascript to Display Blob – TJBlackman Commented Aug 8, 2018 at 21:48
1 Answer
Reset to default 19You can use URL.createObjectURL to generate a blob URL and set it as the image source.
const blobUrl = URL.createObjectURL(blob) // blob is the Blob object
image.src = blobUrl // image is the image element from the DOM