无需发起请求获取绝对URL图片尺寸的替代方案咨询

我之前也碰到过类似的生产环境网络限制问题，没法直接拉取外部图片确实很棘手。既然image-size因为网络请求被拦截没法用，那我们可以从代理转发、前端渲染获取、URL结构化解析这几个角度来解决，下面是具体的方案：

1. 后端通过内部代理转发请求（Node.js场景） #

如果你的生产环境有内部代理服务器允许访问外部资源，那可以给image-size的请求加上代理配置，绕过对外请求的限制。你可以用https-proxy-agent这类包来实现：

const sizeOf = require('image-size');
const https = require('https');
const HttpsProxyAgent = require('https-proxy-agent');

// 配置你的内部代理地址
const proxyAgent = new HttpsProxyAgent('http://your-company-proxy:8080');

// 通过代理请求图片并获取尺寸
https.get('https://external-domain.com/your-image.jpg', { agent: proxyAgent }, (res) => {
  sizeOf(res, (err, dimensions) => {
    if (err) {
      console.error('获取尺寸失败:', err);
      return;
    }
    console.log('图片尺寸:', dimensions); // 输出 { width: 1200, height: 800, type: 'jpg' }
  });
});

这个方案的前提是企业内部有合规的代理服务，这在很多生产环境中是标配。

2. 前端通过Image实例获取尺寸（Web应用场景） #

如果你的需求是在前端页面中获取图片尺寸，可以利用浏览器的Image对象。只要浏览器能加载目标图片（比如图片域名配置了CORS，或者和当前站点同域），就能在图片加载完成后读取宽高：

const getImageSize = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 跨域图片需要设置这个属性（前提是图片服务器允许CORS）
    img.crossOrigin = 'anonymous';
    
    img.onload = () => {
      resolve({ width: img.width, height: img.height });
    };
    
    img.onerror = () => {
      reject(new Error('图片加载失败，无法获取尺寸'));
    };
    
    img.src = url;
  });
};

// 使用示例
getImageSize('https://external-domain.com/your-image.jpg')
  .then(dimensions => console.log('图片尺寸:', dimensions))
  .catch(err => console.error(err));

注意：如果企业浏览器策略也禁止访问外部图片，这个方案就不适用了。

3. 解析URL中的结构化尺寸参数（CDN图片场景） #

很多图片CDN的URL会直接包含尺寸信息，比如https://cdn.example.com/800x600/photo.jpg或者https://example.com/img.jpg?w=1000&h=750这种格式。你可以用正则从URL中直接提取这些参数，完全不用请求图片：

function extractSizeFromUrl(url) {
  // 匹配 ?w=xxx&h=xxx 格式的参数
  const widthParam = url.match(/[?&]w=(\d+)/);
  const heightParam = url.match(/[?&]h=(\d+)/);
  if (widthParam && heightParam) {
    return {
      width: parseInt(widthParam[1], 10),
      height: parseInt(heightParam[1], 10)
    };
  }

  // 匹配 /xxx/xxxXxxx/xxx 格式的路径（比如 800x600）
  const sizePath = url.match(/\/(\d+)x(\d+)\//i);
  if (sizePath) {
    return {
      width: parseInt(sizePath[1], 10),
      height: parseInt(sizePath[2], 10)
    };
  }

  return null; // 没有匹配到尺寸参数
}

// 使用示例
const size1 = extractSizeFromUrl('https://cdn.example.com/800x600/cat.jpg');
console.log(size1); // { width: 800, height: 600 }

const size2 = extractSizeFromUrl('https://example.com/dog.jpg?w=1200&h=900');
console.log(size2); // { width: 1200, height: 900 }

这个方案效率最高，但只适用于URL本身包含尺寸信息的场景。

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