使用Fetch构建跨站购物车：商品最大图片筛选问题求助

你当前代码里，用DOMParser解析出来的img元素属于离线文档节点，浏览器不会自动加载这些图片资源，所以image.complete永远为false，绑定的load事件也不会触发，自然拿不到真实的宽高尺寸。

方案1：从HTML属性直接提取尺寸（最快，无需加载图片） #

多数电商网站会在img标签里直接标注真实尺寸，比如原生width/height属性、data-*自定义属性（如data-original-width），或者srcset里的尺寸信息，优先读取这些属性即可：

let largestImage = null;
let largestSize = 0;

for (let i = 0; i < images.length; i++) {
  const image = images[i];
  // 优先读取属性中的尺寸值
  const imgWidth = parseInt(image.getAttribute('width') || image.dataset.width || image.dataset.originalWidth);
  const imgHeight = parseInt(image.getAttribute('height') || image.dataset.height || image.dataset.originalHeight);
  
  if (!isNaN(imgWidth) && !isNaN(imgHeight)) {
    const imageSize = imgWidth * imgHeight;
    if (imageSize > largestSize) {
      largestSize = imageSize;
      largestImage = image;
    }
  }
}

console.log('最大图片（从属性提取）:', largestImage?.src);

方案2：手动创建img元素加载获取尺寸 #

如果属性里没有标注尺寸，需要在当前页面DOM中创建新的img元素，主动加载图片后获取尺寸，注意处理跨域：

// 封装图片加载函数
function getImageSize(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域（需图片服务器支持CORS）
    img.crossOrigin = 'anonymous';
    img.onload = () => resolve({ width: img.width, height: img.height, src });
    img.onerror = () => reject(new Error(`加载图片失败: ${src}`));
    img.src = src;
  });
}

// 遍历图片并获取尺寸
async function findLargestImage(images) {
  let largestSize = 0;
  let largestSrc = '';

  const tasks = Array.from(images).map(async (img) => {
    try {
      const sizeData = await getImageSize(img.src);
      const totalSize = sizeData.width * sizeData.height;
      if (totalSize > largestSize) {
        largestSize = totalSize;
        largestSrc = sizeData.src;
      }
    } catch (err) {
      console.log(err.message);
    }
  });

  await Promise.all(tasks);
  return largestSrc;
}

// 在你的fetch回调中调用
findLargestImage(images).then(src => {
  console.log('最大图片（加载后获取）:', src);
});

方案3：优先抓取结构化数据（更精准） #

电商网站通常会在页面中加入Open Graph或Product Schema标记，这些标记里的图片一般就是商品主图，部分还会附带尺寸信息：

// 抓取Open Graph主图
const ogImage = htmlDoc.querySelector('meta[property="og:image"]')?.getAttribute('content');
if (ogImage) console.log('OG主图:', ogImage);

// 抓取Product Schema中的图片
const schemaScripts = htmlDoc.querySelectorAll('script[type="application/ld+json"]');
schemaScripts.forEach(script => {
  try {
    const data = JSON.parse(script.textContent);
    if (data['@type'] === 'Product' && data.image) {
      // 部分schema会返回带尺寸的图片数组
      const productImages = Array.isArray(data.image) ? data.image : [data.image];
      productImages.forEach(img => {
        if (img.width && img.height) {
          const size = img.width * img.height;
          // 可在这里比较筛选最大尺寸图片
          console.log('Schema图片:', img.url, `尺寸: ${img.width}x${img.height}`);
        }
      });
    }
  } catch (e) {
    // 忽略解析失败的脚本
  }
});

• 跨域限制：即使使用CORS Unblock扩展，图片加载仍可能因服务器CORS配置失败，最稳妥的方式是通过服务器端代理转发图片请求，规避浏览器跨域限制。
• 性能优化：加载所有图片获取尺寸会消耗较多资源，优先使用方案1和方案3，仅在必要时使用方案2。

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