How to retrieve an Image from img tag with remote url and create File object from it

Question

Steps:

I have a remote image url.

I generated the img tag from it.

Now I want to read this img tag and convert it into a File object so that I can send it to server for upload.

Method 1 Tried: I have already tried the fetch method and directly tried to fetch image data from remote url.

Method 2 Tried:

clicked = () => {
const img = document.getElementById('someId');

const options = {
  method: 'get',
  headers: {
    'Access-Control-Request-Headers': '*',
    'Access-Control-Request-Method': '*',
  },
  mode: 'cors',
};

fetch(img.src, options)
  .then(res => res.blob())
  .then((blob) => {
    const file = new File([blob], 'dot.png', blob);
    console.log(file);
  });
}

Expected output is File object.

Answer 1

I am using axios here but the principal should be the same:

const res = await axios.get(`/api/image/${imageId}`, {
responseType: 'arraybuffer'
});
const imgFile = new Blob([res.data]);
const imgUrl = URL.createObjectURL(imgFile);

Ignore the response type.