將圖像 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))