使用JavaScript从URL获取Base64图片时JPEG格式无返回结果的问题

数据老陈

2026-5-28

问题分析与解决方案

你遇到的这个问题和FileReader API的设置完全无关，核心问题出在你请求时用的mode: "no-cors"选项上！

为什么PNG能正常工作，JPEG却不行？

当你使用no-cors模式发起跨域请求时，浏览器会返回一个「不透明响应（opaque response）」——这种响应的内容是被浏览器屏蔽的，JavaScript根本无法读取它的实际数据。

那为什么谷歌的PNG图片看起来没问题？其实是因为谷歌的图片服务器配置了允许跨域的响应头（比如Access-Control-Allow-Origin），你的请求实际上并没有真正触发no-cors模式，或者浏览器缓存了之前允许跨域的响应结果。而images.dog.ceo的服务器没有配置CORS头，所以返回的是标准的不透明Blob，此时FileReader尝试读取它时会失败，但因为你的代码没有处理reject回调，所以看起来像是“没有返回结果”。

修正后的代码方案

最简单的解决方法是移除mode: "no-cors"选项，同时添加错误处理逻辑，这样就能正常处理支持CORS的图片资源：

var toDataURL = url => fetch(url)
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.blob();
  })
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject; // 确保错误能被捕获
    reader.readAsDataURL(blob);
  }));

// 测试JPEG图片
toDataURL('https://images.dog.ceo/breeds/husky/n02110185_12748.jpg')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl);
  })
  .catch(err => {
    console.error('出错了:', err);
  });