Convert image url to file JavaScript

Question

What the reason that I can't convert png url? With jpg works well

const getFileFromUrl = async (url, defaultType = 'image/jpeg') => {
    const response = await fetch(url);
    const data = await response.blob();

    return new File([data], url, {
      type: response.headers.get('content-type') || defaultType,
    });
  };

const pngUrl = 'https://pngimg.com/uploads/smoke/smoke_PNG55226.png';

const jpgUrl = 'picsum.photos/id/930/536/354.jpg';

getFileFromUrl(pngUrl).then(data => console.log(data)).catch(err => console.log(err))

'image/jpeg' is just the default value of defaultType. It will be used only if response.headers.get('content-type') doesn't exist. @itwaze: Can you log what is printed by response.headers.get('content-type') ? — Harsha Venkataramu
– Harsha Venkataramu, Commented Oct 6, 2020 at 19:51

KiwiKilian · Accepted Answer · 2020-10-06 20:03:48Z

2

The problem is not about the filetypes but the CORS configurations of the pngimg.com server. Their server basically doesn't allow you to access their resources from another domain. Taken from MDN:

The response to the CORS request is missing the required Access-Control-Allow-Origin header, which is used to determine whether or not the resource can be accessed by content operating within the current origin.

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value.

This png will work fine with your code: https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample

answered Oct 6, 2020 at 20:03

KiwiKilian

1,2991 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ch4nd4n · Accepted Answer · 2020-10-06 20:02:19Z

1

In this particular example it seems like pngimg.com doesn't allow CORS.

While picsum.photos does. For example works fine.

webp = 'https://i.picsum.photos/id/294/200/300.webp?hmac=TfUv_Mk33Jmph_emWudbTWVO4e60vnZnJHp_f4emHEo'

getFileFromUrl(webp).then((d) => {
  console.log(d);
}).catch(err => console.log(err))

I couldn't find a source which hosts png and allows CORS. But above example uses webp to demonstrate that its not really PNG issue as such.

Update

As @KiwiKilian posted png image URL, it seems to be working just fine. For example

let png = 'https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample'

getFileFromUrl(png).then((d) => {
  console.log(d);
}).catch(err => console.log(err))

answered Oct 6, 2020 at 20:02

ch4nd4n

4,2272 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Convert image url to file JavaScript

2 Answers 2

Comments

Update

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update

Comments

Your Answer

Sign up or log in

Post as a guest

Related