将图像 url 转换为文件 JavaScript

Question

我无法转换 png url 的原因是什么？ 使用 jpg 效果很好

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))

Answer 1

问题不在于文件类型，而在于 pngimg.com 服务器的 CORS 配置。 他们的服务器基本上不允许您从另一个域访问他们的资源。 摘自MDN ：

对 CORS 请求的响应缺少所需的 Access-Control-Allow-Origin 标头，该标头用于确定资源是否可以被在当前源中操作的内容访问。

如果服务器在您的控制之下，请将请求站点的源添加到允许访问的域集，方法是将其添加到 Access-Control-Allow-Origin 标头的值中。

此 png 将适用于您的代码： https : //dummyimage.com/420x320/ff7f7f/333333.png&text=Sample

Answer 2

在这个特定示例中，pngimg.com 似乎不允许 CORS。

而 picsum.photos 可以。 例如工作正常。

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))

我找不到托管 png 并允许 CORS 的源。 但上面的例子使用 webp 来证明它并不是真正的 PNG 问题。

更新

由于@KiwiKilian 发布了 png 图像 URL，它似乎工作得很好。 例如

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

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