如何在JavaScript中从Image对象获取图片MIME类型

确实，原生Image对象本身并没有直接暴露图片的Content-Type属性，不过我们有两种靠谱的方案，既能利用浏览器的缓存机制和资源加载优先级，又能拿到准确的MIME类型：

方案一：利用Performance API读取资源加载记录 #

当图片加载完成后，浏览器的Performance API会记录下该资源的加载详情，包括响应头信息。我们可以通过这个记录提取Content-Type：

const img = new Image();
img.src = "your-image-url.jpg";
img.onload = async () => {
  // 等待性能条目完成更新（部分浏览器需要微任务延迟确保记录已写入）
  await new Promise(resolve => setTimeout(resolve, 0));
  
  // 获取所有已加载的资源条目
  const resourceEntries = performance.getEntriesByType("resource");
  // 匹配当前图片的资源记录
  const imgResource = resourceEntries.find(entry => entry.name === img.src);
  
  if (imgResource) {
    // 从响应头中提取Content-Type
    const contentTypeMatch = imgResource.responseHeaders.match(/Content-Type:\s*([^\r\n]+)/i);
    const contentType = contentTypeMatch?.[1];
    console.log("图片MIME类型:", contentType);
  }
};

注意事项： #

• 现代浏览器都支持PerformanceResourceTiming API，兼容性没问题；
• 如果图片是跨域资源，需要服务器配置Timing-Allow-Origin响应头，否则无法读取responseHeaders；
• 这个方案完全复用浏览器的缓存和加载优先级，没有额外的网络请求或性能开销，能拿到服务器返回的原始Content-Type。

方案二：Canvas转Blob读取类型（适合同源图片） #

如果图片是同源的，可以通过Canvas将图片转换为Blob，然后读取Blob的type属性：

const img = new Image();
img.src = "your-image-url.jpg";
img.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  
  // 将Canvas内容转为Blob
  canvas.toBlob(blob => {
    if (blob) {
      console.log("图片MIME类型:", blob.type);
    }
  });
};

注意事项： #

• 仅适合同源图片，跨域图片会触发画布污染，无法转换为Blob；
• 如果是SVG图片，Canvas会将其渲染为位图，转换后的Blob类型会变成image/png，无法拿到原始的image/svg+xml类型；
• 存在额外的Canvas绘制开销，性能上不如方案一。

总结 #

优先推荐方案一，尤其是跨域场景（只要服务器配置了对应的响应头），它能准确获取原始的Content-Type，且完全利用浏览器的缓存机制；同源场景如果不需要原始类型，或者不想依赖Performance API，可以选择方案二。

内容的提问来源于stack exchange，提问作者Xen_mar