Store Image in Variable

Question

I have this image element with an id. I am trying to store it as a variable so that I can use it. I have my code but when I run it, instead of a display image, it shows me [object Object]. Please, how do I store images in a variable and gain access to it?

html:

<img width="100" height="100" id="image"/>

Javascript:

function myTest(){
  var image =  $("#image").attr("src", "data:image/jpeg;base64,");
}

you can try to store image src as a string in a variable will that works for you? — AHSAN KHAN, Apr 05 '18 at 04:07
Your script (or HTML?) there doesn't look valid, can you post a clearer example of what you have so far? — CertainPerformance, Apr 05 '18 at 04:09
Are you trying to convert an image from a source like `image.jpg` into base64-encoded string? — 000, Apr 05 '18 at 04:12
_"when I run it, instead of a display image, it shows me [object Object]"_ <- nothing in your code would display anything at all. What **exactly** is producing `[object Object]`? — Phil, Apr 05 '18 at 04:15
Are you trying to **replace** the `src` attribute of your image with the base64 string image? — Obsidian Age, Apr 05 '18 at 04:15
Possible duplicate of [How can I display a JavaScript object?](https://stackoverflow.com/questions/957537/how-can-i-display-a-javascript-object) — Phil, Apr 05 '18 at 04:18

score 0 · Answer 1 · answered Apr 05 '18 at 04:23

If for some reason you want the actual base64 data of the image to use later, and not just the src, then you'd do something like

fetch(srcOfImg)
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const newImg = document.body.appendChild(document.createElement('img'));
      newImg.src = reader.result;
    }
    reader.readAsDataURL(blob);
  });

Store Image in Variable

1 Answers1