如何在Node.js Axios+Express中校验OpenLibrary API图书封面尺寸并替换小图

要解决封面尺寸过小的问题，仅通过HEAD请求无法获取图片真实宽高（响应头不包含该信息），必须加载图片后校验尺寸。以下是基于Axios的实现方案：

核心实现思路 #

1. 发送GET请求获取封面图片的二进制数据（Blob格式）
2. 通过创建Image对象加载Blob，获取图片真实宽高
3. 校验尺寸，若宽/高小于100px则返回本地占位图，否则返回原封面URL
4. 请求失败时直接返回占位图

代码实现 #

import axios from 'axios';

async function getValidCoverUrl(openLibraryCoverUrl) {
  // 本地占位图路径，根据你的项目结构调整
  const fallbackImage = '/assets/no-image-available.jpg';

  try {
    // 获取图片Blob数据
    const response = await axios.get(openLibraryCoverUrl, {
      responseType: 'blob',
      timeout: 5000 // 设置超时时间，避免请求阻塞
    });

    // 创建Image对象并加载Blob
    const img = new Image();
    const blobUrl = URL.createObjectURL(response.data);

    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
      img.src = blobUrl;
    });

    // 校验尺寸，释放Blob URL后返回对应结果
    const isValidSize = img.width >= 100 && img.height >= 100;
    URL.revokeObjectURL(blobUrl); // 释放内存，避免泄漏
    return isValidSize ? openLibraryCoverUrl : fallbackImage;
  } catch (error) {
    // 请求超时、图片不存在等异常情况，直接返回占位图
    return fallbackImage;
  }
}

优化建议 #

• 缓存校验结果：用Map缓存已校验过的封面URL，避免重复请求，提升性能：

  const coverCache = new Map();
  
  async function getValidCoverUrl(openLibraryCoverUrl) {
    if (coverCache.has(openLibraryCoverUrl)) {
      return coverCache.get(openLibraryCoverUrl);
    }
    // ... 原有逻辑 ...
    const result = isValidSize ? openLibraryCoverUrl : fallbackImage;
    coverCache.set(openLibraryCoverUrl, result);
    return result;
  }
  

• 优先请求指定尺寸封面：OpenLibrary支持通过URL参数指定封面尺寸（如-L对应大尺寸，-M对应中尺寸），优先请求这些尺寸的封面，可减少遇到极小图的概率：

  // 示例：请求中尺寸封面
  const openLibraryUrl = `https://covers.openlibrary.org/b/id/${bookId}-M.jpg`;
  

使用示例 #

在你的图书组件中调用该函数获取有效封面：

async function loadBookCover(book) {
  const coverUrl = await getValidCoverUrl(book.openLibraryCoverUrl);
  document.getElementById(`book-${book.id}-cover`).src = coverUrl;
}

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