如何使用vanilla JavaScript获取页面任意图片的最高分辨率链接

核心逻辑 #

• 优先读取元素自带的多分辨率配置srcset，取分辨率最高的资源地址
• 遍历通用懒加载自定义属性，读取预存的高清图地址
• 清理图片CDN链接中的缩放、裁剪参数，还原原图地址
• 以上规则都未命中时，返回原始src作为兜底

可直接使用的脚本 #

/**
 * 获取图片元素对应的最高清资源链接
 * @param {HTMLImageElement|string} input - 图片元素 或 图片URL字符串
 * @returns {string} 最高清图片链接
 */
function getHighestResImageUrl(input) {
  // 处理输入为URL的情况
  if (typeof input === 'string') {
    return cleanImageUrlParams(input)
  }
  // 非IMG元素直接返回空
  if (input.tagName !== 'IMG') return ''

  // 1. 优先读取srcset的最高分辨率资源
  if (input.srcset) {
    const sources = input.srcset.split(',').map(item => {
      const [url, density] = item.trim().split(/\s+/)
      return {
        url: url,
        dpi: density ? parseFloat(density) : 1
      }
    })
    // 按分辨率降序取第一个
    sources.sort((a, b) => b.dpi - a.dpi)
    if (sources[0]?.url) {
      return new URL(sources[0].url, window.location.origin).href
    }
  }

  // 2. 遍历常见的懒加载高清图自定义属性
  const highResAttrs = ['data-src', 'data-original', 'data-highres', 'data-large', 'data-srcset', 'data-url']
  for (const attr of highResAttrs) {
    const attrVal = input.getAttribute(attr)
    if (attrVal) {
      // 处理srcset格式的属性值
      if (attr.includes('srcset') && attrVal.includes(',')) {
        const sources = attrVal.split(',').map(item => {
          const [url, density] = item.trim().split(/\s+/)
          return {
            url: url,
            dpi: density ? parseFloat(density) : 1
          }
        })
        sources.sort((a, b) => b.dpi - a.dpi)
        if (sources[0]?.url) {
          return new URL(sources[0].url, window.location.origin).href
        }
      }
      return new URL(attrVal, window.location.origin).href
    }
  }

  // 3. 清理原图URL的尺寸参数后返回
  if (input.src) {
    return cleanImageUrlParams(input.src)
  }

  return ''
}

/**
 * 清理图片URL中的缩放/裁剪参数，还原原图
 * @param {string} url 原始图片URL
 * @returns {string} 清理后的URL
 */
function cleanImageUrlParams(url) {
  try {
    const urlObj = new URL(url)
    // 常见的尺寸相关参数，匹配后直接删除
    const sizeParams = ['w', 'width', 'h', 'height', 's', 'size', 'resize', 'crop', 'thumbnail', 'imw', 'imh']
    sizeParams.forEach(param => {
      if (urlObj.searchParams.has(param)) {
        urlObj.searchParams.delete(param)
      }
    })
    // 处理路径中带尺寸的场景 比如 xxx/300x200/xxx.jpg
    const pathParts = urlObj.pathname.split('/')
    const sizeRegex = /\d+x\d+/i
    for (let i = 0; i < pathParts.length; i++) {
      if (sizeRegex.test(pathParts[i])) {
        pathParts[i] = 'original' // 多数站点替换为original即可获取原图，可根据需要调整
        break
      }
    }
    urlObj.pathname = pathParts.join('/')
    return urlObj.href
  } catch (e) {
    // URL解析失败直接返回原始值
    return url
  }
}

使用示例 #

// 传入IMG元素
const img = document.querySelector('img')
const highResUrl = getHighestResImageUrl(img)
console.log(highResUrl)

// 直接传入图片URL
const url = 'https://xxx.com/xxx.jpg?w=200'
const cleanedUrl = getHighestResImageUrl(url)
console.log(cleanedUrl)

适配扩展建议 #

• 可根据目标站点的规则，在highResAttrs数组中新增站点专属的高清图存储属性
• 可补充更多CDN的尺寸参数和路径规则到cleanImageUrlParams方法中，进一步提升覆盖率
• 生产环境使用时可新增HEAD请求校验逻辑，确认返回的链接可正常访问后再使用

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