Image 指南#

// 1. 实现创建图片
const ImageInstance = new Image()

// 2. 定义需要加载的图片链接常量和报错文本描述
const ImageLink = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
const ImageErrorText = '图片加载失败'

// 3. 实现监听事件
ImageInstance.addEventListener('load', () => {
    console.log('图片加载成功，以及图片的宽度和高度', ImageInstance.width, ImageInstance.height)
    document.body.appendChild(ImageInstance)
})

// 4. 实现错误监听事件
ImageInstance.addEventListener('error', () => {
    console.log('图片加载失败')
    document.body.appendChild(DocumentFragment)
    document.createTextNode(ImageErrorText)
})

// 1. 准备图片资源列表
const LoadingImageSourceList = [
    'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
    'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
    'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
]

const PreloadImageResultList = []
// 2. 定义加载函数
function PreloadImageFunc(preloadImageSourceList) {
    preloadImageSourceList.forEach((item) => {
        // 1. 实现创建图片
        const ImageInstance = new Image()
        ImageInstance.src = item

        // 2. 实现事件监听
        ImageInstance.addEventListener('load', () => {
            PreloadImageResultList.push({
                status: 'success',
                url: item,
            })
        })

        // 3. 实现错误监听事件
        ImageInstance.addEventListener('error', () => {
            PreloadImageResultList.push({
                status: 'error',
                url: item,
            })
        })

        // 在这里判断是否加载完成，同时也是可以进行日志收集的呐
        if (PreloadImageResultList.length === preloadImageSourceList.length) {
            console.log('图片预加载完成', PreloadImageResultList)
        }
    })
}

// 3. 调用加载函数
PreloadImageFunc(LoadingImageSourceList)
// 最后进行收集操作后的结果，进行日志记录
sendLogs({
    type: 'preload_image',
    data: PreloadImageResultList,
})

/**
 * 图片预加载器 - 提供面向对象(OOP)和函数式编程(FP)两种实现方式
 */

// ==========================================
// 第一部分: 面向对象实现
// ==========================================
/**
 * 面向对象的图片预加载器类
 */
class ImagePreloader {
  /**
   * 构造函数
   * @param {Object} defaultOptions - 全局默认配置项
   */
  constructor(defaultOptions = {}) {
    this.defaultOptions = {
      timeout: 30000,
      concurrency: 5,
      ...defaultOptions
    };
  }

  /**
   * 预加载图片资源
   * @param {Array<string>} imageUrls - 图片URL数组
   * @param {Object} options - 配置选项
   * @param {number} options.timeout - 单个图片加载超时时间（毫秒）
   * @param {number} options.concurrency - 并发加载数量
   * @param {Function} options.onProgress - 进度回调函数，接收(current, total, result)参数
   * @returns {Promise<Array<{status: 'success'|'error', url: string, width?: number, height?: number, error?: Error}>>} 
   * 包含所有图片加载结果的Promise
   */
  async preload(imageUrls, options = {}) {
    // 合并默认配置和传入配置
    const { timeout, concurrency, onProgress } = { ...this.defaultOptions, ...options };
    const results = [];
    const total = imageUrls.length;
    let current = 0;

    // 创建一个加载单个图片的函数
    const loadImage = (url) => {
      return new Promise((resolve) => {
        // 设置超时定时器
        const timeoutId = setTimeout(() => {
          resolve({
            status: 'error',
            url,
            error: new Error(`图片加载超时: ${url}`)
          });
        }, timeout);

        const img = new Image();

        img.onload = () => {
          clearTimeout(timeoutId);
          resolve({
            status: 'success',
            url,
            width: img.width,
            height: img.height
          });
        };

        img.onerror = () => {
          clearTimeout(timeoutId);
          resolve({
            status: 'error',
            url,
            error: new Error(`图片加载失败: ${url}`)
          });
        };

        // 开始加载图片
        img.src = url;
        // 设置crossOrigin以支持跨域图片获取宽高等信息
        img.crossOrigin = 'anonymous';
      });
    };

    // 实现并发控制的函数
    const loadWithConcurrency = async () => {
      const queue = [...imageUrls];
      const activeRequests = new Set();

      while (queue.length > 0 || activeRequests.size > 0) {
        // 当活跃请求数小于并发数且队列有任务时，创建新的请求
        while (activeRequests.size < concurrency && queue.length > 0) {
          const url = queue.shift();
          const request = loadImage(url).then(result => {
            activeRequests.delete(request);
            results.push(result);
            current++;
            
            // 调用进度回调
            if (typeof onProgress === 'function') {
              onProgress(current, total, result);
            }
          });
          
          activeRequests.add(request);
        }

        // 等待任一请求完成
        if (activeRequests.size > 0) {
          await Promise.race(activeRequests);
        }
      }
    };

    // 开始加载
    await loadWithConcurrency();
    return results;
  }

  /**
   * 预加载单个图片
   * @param {string} url - 图片URL
   * @param {Object} options - 配置选项
   * @returns {Promise<{status: 'success'|'error', url: string, width?: number, height?: number, error?: Error}>}
   */
  async preloadSingle(url, options = {}) {
    const [result] = await this.preload([url], options);
    return result;
  }

  // 静态方法，方便不创建实例直接使用
  static async preload(imageUrls, options = {}) {
    const preloader = new ImagePreloader();
    return preloader.preload(imageUrls, options);
  }

  static async preloadSingle(url, options = {}) {
    const preloader = new ImagePreloader();
    return preloader.preloadSingle(url, options);
  }
}

// ==========================================
// 第二部分: 函数式编程实现
// ==========================================
/**
 * 函数式编程风格的图片预加载工具
 */
const imagePreloaderFP = {
  /**
   * 创建加载单个图片的函数
   * @param {number} timeout - 超时时间
   * @returns {Function} 加载单个图片的函数
   */
  createLoadImageFunction: (timeout = 30000) => {
    return (url) => {
      return new Promise((resolve) => {
        const timeoutId = setTimeout(() => {
          resolve({
            status: 'error',
            url,
            error: new Error(`图片加载超时: ${url}`)
          });
        }, timeout);

        const img = new Image();
        img.crossOrigin = 'anonymous';

        img.onload = () => {
          clearTimeout(timeoutId);
          resolve({
            status: 'success',
            url,
            width: img.width,
            height: img.height
          });
        };

        img.onerror = () => {
          clearTimeout(timeoutId);
          resolve({
            status: 'error',
            url,
            error: new Error(`图片加载失败: ${url}`)
          });
        };

        img.src = url;
      });
    };
  },

  /**
   * 创建并发控制函数
   * @param {number} concurrency - 并发数
   * @returns {Function} 带并发控制的任务执行函数
   */
  createConcurrencyControl: (concurrency = 5) => {
    return async (tasks, onProgress) => {
      const results = [];
      const queue = [...tasks];
      const activeRequests = new Set();
      const total = tasks.length;
      let completed = 0;

      while (queue.length > 0 || activeRequests.size > 0) {
        while (activeRequests.size < concurrency && queue.length > 0) {
          const task = queue.shift();
          const resultPromise = task();
          
          activeRequests.add(resultPromise);
          
          resultPromise.then(result => {
            activeRequests.delete(resultPromise);
            results.push(result);
            completed++;
            
            if (typeof onProgress === 'function') {
              onProgress(completed, total, result);
            }
          });
        }

        if (activeRequests.size > 0) {
          await Promise.race(activeRequests);
        }
      }

      return results;
    };
  },

  /**
   * 预加载图片资源的纯函数
   * @param {Array<string>} imageUrls - 图片URL数组
   * @param {Object} options - 配置选项
   * @returns {Promise<Array<{status: 'success'|'error', url: string, width?: number, height?: number, error?: Error}>>}
   */
  preloadImages: (imageUrls, options = {}) => {
    const { timeout = 30000, concurrency = 5, onProgress = null } = options;
    
    const loadImage = imagePreloaderFP.createLoadImageFunction(timeout);
    
    const executeWithConcurrency = imagePreloaderFP.createConcurrencyControl(concurrency);
    
    const tasks = imageUrls.map(url => () => loadImage(url));
    
    return executeWithConcurrency(tasks, onProgress);
  },

  /**
   * 预加载单个图片的纯函数
   * @param {string} url - 图片URL
   * @param {Object} options - 配置选项
   * @returns {Promise<{status: 'success'|'error', url: string, width?: number, height?: number, error?: Error}>}
   */
  preloadSingleImage: (url, options = {}) => {
    return imagePreloaderFP.preloadImages([url], options).then(results => results[0]);
  }
};

const preloadImages = imagePreloaderFP.preloadImages;
const preloadSingleImage = imagePreloaderFP.preloadSingleImage;

// 工程化开发
export { 
  ImagePreloader, 
  preloadImages, 
  preloadSingleImage, 
  imagePreloaderFP 
};

// 浏览器环境的开发，直接 window 对象上进行注入就可以了
typeof window !== 'undefined' && (window.ImagePreloader = ImagePreloader);
typeof window !== 'undefined' && (window.preloadImages = preloadImages);
typeof window !== 'undefined' && (window.preloadSingleImage = preloadSingleImage);
typeof window !== 'undefined' && (window.imagePreloaderFP = imagePreloaderFP);

const img = new Image();
img.src = "product.jpg";
img.onload = function() {
  const originalWidth = img.naturalWidth;
  const originalHeight = img.naturalHeight;
  console.log("图片原始尺寸：", originalWidth, "x", originalHeight);

  if (originalWidth > 800) {
    img.style.width = "800px";
    img.style.height = "auto"; // 保持比例
  }
};

/**
 * 图片工具库 - 提供性能监控计算、图片原数据上报等功能
 * @author: juwenzhang
 */

// ==========================================
// 第一部分: 面向对象实现
// ==========================================
/**
 * 图片工具类 - 提供图片信息获取、性能监控和原数据上报功能
 */
class ImageTools {
  /**
   * 构造函数
   * @param {Object} defaultOptions - 全局默认配置项
   */
  constructor(defaultOptions = {}) {
    this.defaultOptions = {
      timeout: 30000,
      reportUrl: '',
      ...defaultOptions
    };
    
    // 性能监控数据存储
    this.performanceData = {};
  }

  /**
   * 获取图片信息
   * @param {string} url - 图片URL
   * @param {Object} options - 配置选项
   * @returns {Promise<{width: number, height: number, naturalWidth: number, naturalHeight: number, size?: number, type?: string, loadTime?: number}>}
   */
  async getImageInfo(url, options = {}) {
    const { timeout = this.defaultOptions.timeout } = options;
    const startTime = performance.now();
    
    return new Promise((resolve, reject) => {
      const timeoutId = setTimeout(() => {
        reject(new Error(`获取图片信息超时: ${url}`));
      }, timeout);

      const img = new Image();
      img.crossOrigin = 'anonymous';

      img.onload = () => {
        clearTimeout(timeoutId);
        const endTime = performance.now();
        const loadTime = endTime - startTime;
        
        // 存储性能数据
        this.performanceData[url] = {
          loadTime,
          startTime,
          endTime,
          timestamp: Date.now()
        };

        resolve({
          width: img.width,
          height: img.height,
          naturalWidth: img.naturalWidth,
          naturalHeight: img.naturalHeight,
          loadTime
        });
      };

      img.onerror = () => {
        clearTimeout(timeoutId);
        reject(new Error(`获取图片信息失败: ${url}`));
      };

      img.src = url;
    });
  }

  /**
   * 获取图片详细信息
   * @param {string} url - 图片URL
   * @param {Object} options - 配置选项
   * @returns {Promise<{width: number, height: number, naturalWidth: number, naturalHeight: number, size: number, type: string, loadTime: number, headers?: Object}>}
   */
  async getImageDetails(url, options = {}) {
    const startTime = performance.now();
    
    try {
      // 先通过fetch获取文件信息
      const response = await fetch(url, {
        method: 'HEAD',
        ...options.fetchOptions
      });
      
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      
      // 获取文件大小和类型
      const contentLength = response.headers.get('content-length');
      const contentType = response.headers.get('content-type');
      
      // 获取图片尺寸信息
      const imageInfo = await this.getImageInfo(url, options);
      const endTime = performance.now();
      const totalLoadTime = endTime - startTime;
      
      const details = {
        ...imageInfo,
        size: contentLength ? parseInt(contentLength, 10) : 0,
        type: contentType || 'unknown',
        totalLoadTime,
        headers: Object.fromEntries(response.headers.entries())
      };
      
      // 合并性能数据
      this.performanceData[url] = {
        ...this.performanceData[url],
        ...details,
        timestamp: Date.now()
      };
      
      return details;
    } catch (error) {
      console.error('获取图片详细信息失败:', error);
      throw error;
    }
  }

  /**
   * 计算图片加载性能指标
   * @param {string} url - 图片URL
   * @returns {Object|null} 性能指标对象或null
   */
  getPerformanceMetrics(url) {
    if (!this.performanceData[url]) {
      return null;
    }
    
    const data = this.performanceData[url];
    
    return {
      loadTime: data.loadTime || 0,
      totalLoadTime: data.totalLoadTime || 0,
      timestamp: data.timestamp,
      startTime: data.startTime,
      endTime: data.endTime,
      size: data.size || 0,
      throughput: data.size && data.loadTime ? (data.size / data.loadTime) * 1000 : 0 // 字节/秒
    };
  }

  /**
   * 上报图片原数据
   * @param {string} url - 图片URL
   * @param {Object} additionalData - 额外上报的数据
   * @param {string} reportUrl - 上报URL，优先级高于默认配置
   * @returns {Promise<void>}
   */
  async reportImageData(url, additionalData = {}, reportUrl = this.defaultOptions.reportUrl) {
    if (!reportUrl) {
      console.warn('上报URL未配置，无法上报图片数据');
      return;
    }
    
    const metrics = this.getPerformanceMetrics(url);
    const imageInfo = this.performanceData[url];
    
    if (!metrics || !imageInfo) {
      console.warn('未找到图片数据，无法上报');
      return;
    }
    
    const reportData = {
      url,
      ...metrics,
      ...imageInfo,
      ...additionalData,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      devicePixelRatio: window.devicePixelRatio,
      screenWidth: window.screen.width,
      screenHeight: window.screen.height
    };
    
    try {
      await fetch(reportUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(reportData)
      });
      console.debug('图片数据上报成功:', url);
    } catch (error) {
      console.error('图片数据上报失败:', error);
    }
  }

  /**
   * 计算图片导致的布局偏移（CLS相关）
   * @param {string} url - 图片URL
   * @param {number} expectedWidth - 预期宽度
   * @param {number} expectedHeight - 预期高度
   * @returns {number|null} 布局偏移分数或null
   */
  calculateLayoutShift(url, expectedWidth, expectedHeight) {
    const data = this.performanceData[url];
    
    if (!data || !data.naturalWidth || !data.naturalHeight) {
      return null;
    }
    
    // 简化的CLS计算：比较实际尺寸与预期尺寸的差异
    const widthDiff = Math.abs(data.naturalWidth - expectedWidth);
    const heightDiff = Math.abs(data.naturalHeight - expectedHeight);
    
    // 计算偏移面积占视口面积的比例
    const viewportArea = window.innerWidth * window.innerHeight;
    const shiftArea = widthDiff * heightDiff;
    
    return viewportArea > 0 ? shiftArea / viewportArea : 0;
  }

  /**
   * 获取所有性能监控数据
   * @returns {Object} 所有图片的性能数据
   */
  getAllPerformanceData() {
    return { ...this.performanceData };
  }

  /**
   * 清除性能监控数据
   * @param {string} url - 可选，指定要清除的图片URL，不指定则清除所有
   */
  clearPerformanceData(url) {
    if (url) {
      delete this.performanceData[url];
    } else {
      this.performanceData = {};
    }
  }
}

// ==========================================
// 第二部分: 函数式编程实现
// ==========================================
/**
 * 函数式编程风格的图片工具
 */
const imageToolsFP = {
  // 存储性能数据
  performanceStore: {},
  
  /**
   * 创建获取图片信息的函数
   * @param {number} timeout - 超时时间
   * @returns {Function} 获取图片信息的函数
   */
  createGetImageInfo: (timeout = 30000) => {
    return async (url) => {
      const startTime = performance.now();
      
      return new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
          reject(new Error(`获取图片信息超时: ${url}`));
        }, timeout);

        const img = new Image();
        img.crossOrigin = 'anonymous';

        img.onload = () => {
          clearTimeout(timeoutId);
          const endTime = performance.now();
          const loadTime = endTime - startTime;
          
          const result = {
            width: img.width,
            height: img.height,
            naturalWidth: img.naturalWidth,
            naturalHeight: img.naturalHeight,
            loadTime
          };
          
          // 存储性能数据
          imageToolsFP.performanceStore[url] = {
            ...result,
            startTime,
            endTime,
            timestamp: Date.now()
          };

          resolve(result);
        };

        img.onerror = () => {
          clearTimeout(timeoutId);
          reject(new Error(`获取图片信息失败: ${url}`));
        };

        img.src = url;
      });
    };
  },

  /**
   * 获取图片详细信息
   * @param {Function} getImageInfo - 获取图片信息的函数
   * @param {Object} fetchOptions - fetch配置选项
   * @returns {Function} 获取图片详细信息的函数
   */
  createGetImageDetails: (getImageInfo, fetchOptions = {}) => {
    return async (url) => {
      const startTime = performance.now();
      
      try {
        // 先通过fetch获取文件信息
        const response = await fetch(url, {
          method: 'HEAD',
          ...fetchOptions
        });
        
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        
        // 获取文件大小和类型
        const contentLength = response.headers.get('content-length');
        const contentType = response.headers.get('content-type');
        
        // 获取图片尺寸信息
        const imageInfo = await getImageInfo(url);
        const endTime = performance.now();
        const totalLoadTime = endTime - startTime;
        
        const details = {
          ...imageInfo,
          size: contentLength ? parseInt(contentLength, 10) : 0,
          type: contentType || 'unknown',
          totalLoadTime,
          headers: Object.fromEntries(response.headers.entries())
        };
        
        // 合并性能数据
        if (imageToolsFP.performanceStore[url]) {
          imageToolsFP.performanceStore[url] = {
            ...imageToolsFP.performanceStore[url],
            ...details,
            timestamp: Date.now()
          };
        }
        
        return details;
      } catch (error) {
        console.error('获取图片详细信息失败:', error);
        throw error;
      }
    };
  },

  /**
   * 创建获取性能指标的函数
   * @returns {Function} 获取性能指标的函数
   */
  createGetPerformanceMetrics: () => {
    return (url) => {
      if (!imageToolsFP.performanceStore[url]) {
        return null;
      }
      
      const data = imageToolsFP.performanceStore[url];
      
      return {
        loadTime: data.loadTime || 0,
        totalLoadTime: data.totalLoadTime || 0,
        timestamp: data.timestamp,
        startTime: data.startTime,
        endTime: data.endTime,
        size: data.size || 0,
        throughput: data.size && data.loadTime ? (data.size / data.loadTime) * 1000 : 0
      };
    };
  },

  /**
   * 创建图片数据上报函数
   * @param {string} defaultReportUrl - 默认上报URL
   * @returns {Function} 图片数据上报函数
   */
  createReportImageData: (defaultReportUrl = '') => {
    const getMetrics = imageToolsFP.createGetPerformanceMetrics();
    
    return async (url, additionalData = {}, reportUrl = defaultReportUrl) => {
      if (!reportUrl) {
        console.warn('上报URL未配置，无法上报图片数据');
        return;
      }
      
      const metrics = getMetrics(url);
      const imageInfo = imageToolsFP.performanceStore[url];
      
      if (!metrics || !imageInfo) {
        console.warn('未找到图片数据，无法上报');
        return;
      }
      
      const reportData = {
        url,
        ...metrics,
        ...imageInfo,
        ...additionalData,
        timestamp: Date.now(),
        userAgent: navigator.userAgent,
        devicePixelRatio: window.devicePixelRatio,
        screenWidth: window.screen.width,
        screenHeight: window.screen.height
      };
      
      try {
        await fetch(reportUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(reportData)
        });
        console.debug('图片数据上报成功:', url);
      } catch (error) {
        console.error('图片数据上报失败:', error);
      }
    };
  },

  /**
   * 创建布局偏移计算函数
   * @returns {Function} 布局偏移计算函数
   */
  createCalculateLayoutShift: () => {
    return (url, expectedWidth, expectedHeight) => {
      const data = imageToolsFP.performanceStore[url];
      
      if (!data || !data.naturalWidth || !data.naturalHeight) {
        return null;
      }
      
      const widthDiff = Math.abs(data.naturalWidth - expectedWidth);
      const heightDiff = Math.abs(data.naturalHeight - expectedHeight);
      
      const viewportArea = window.innerWidth * window.innerHeight;
      const shiftArea = widthDiff * heightDiff;
      
      return viewportArea > 0 ? shiftArea / viewportArea : 0;
    };
  },

  /**
   * 获取所有性能数据
   * @returns {Object} 所有图片的性能数据
   */
  getAllPerformanceData: () => {
    return { ...imageToolsFP.performanceStore };
  },

  /**
   * 清除性能数据
   * @param {string} url - 可选，指定要清除的图片URL
   */
  clearPerformanceData: (url) => {
    if (url) {
      delete imageToolsFP.performanceStore[url];
    } else {
      imageToolsFP.performanceStore = {};
    }
  }
};

// 创建常用的工具函数
const getImageInfo = imageToolsFP.createGetImageInfo(30000);
const getImageDetails = imageToolsFP.createGetImageDetails(getImageInfo);
const getPerformanceMetrics = imageToolsFP.createGetPerformanceMetrics();
const reportImageData = imageToolsFP.createReportImageData();
const calculateLayoutShift = imageToolsFP.createCalculateLayoutShift();

// 统一模块导出方案
// 适配不同环境的模块导出
(function() {
  try {
    // 检查是否支持CommonJS模块
    if (typeof module !== 'undefined' && module.exports) {
      module.exports = {
        ImageTools,
        imageToolsFP,
        getImageInfo,
        getImageDetails,
        getPerformanceMetrics,
        reportImageData,
        calculateLayoutShift
      };
    } 
    // 检查是否支持AMD模块
    else if (typeof define === 'function' && define.amd) {
      define([], function() {
        return {
          ImageTools,
          imageToolsFP,
          getImageInfo,
          getImageDetails,
          getPerformanceMetrics,
          reportImageData,
          calculateLayoutShift
        };
      });
    } 
    // 浏览器环境，挂载到全局window对象
    else if (typeof window !== 'undefined') {
      window.ImageTools = ImageTools;
      window.imageToolsFP = imageToolsFP;
      window.getImageInfo = getImageInfo;
      window.getImageDetails = getImageDetails;
      window.getPerformanceMetrics = getPerformanceMetrics;
      window.reportImageData = reportImageData;
      window.calculateLayoutShift = calculateLayoutShift;
    }
  } catch (error) {
    console.warn('模块导出适配失败:', error);
  }
})();


// ==========================================
// 第三部分: 使用示例
// ==========================================
// 创建ImageTools实例
const imageTools = new ImageTools({
  timeout: 15000,
  reportUrl: 'https://example.com/api/report'
});

// 获取图片信息
async function exampleOOPGetImageInfo() {
  try {
    const imageUrl = 'https://example.com/image.jpg';
    const info = await imageTools.getImageInfo(imageUrl);
    console.log('图片信息:', info);
    
    // 输出示例: { width: 800, height: 600, naturalWidth: 1200, naturalHeight: 900, loadTime: 123.45 }
  } catch (error) {
    console.error('获取图片信息失败:', error);
  }
}

// 获取图片详细信息
async function exampleOOPGetImageDetails() {
  try {
    const imageUrl = 'https://example.com/image.jpg';
    const details = await imageTools.getImageDetails(imageUrl, {
      fetchOptions: {
        credentials: 'include'
      }
    });
    console.log('图片详细信息:', details);
    
    // 输出示例包含文件大小、类型等更多信息
  } catch (error) {
    console.error('获取图片详细信息失败:', error);
  }
}

// 获取图片性能指标和上报
async function exampleOOPPerformanceAndReport() {
  try {
    const imageUrl = 'https://example.com/image.jpg';
    await imageTools.getImageDetails(imageUrl);
    
    // 获取性能指标
    const metrics = imageTools.getPerformanceMetrics(imageUrl);
    console.log('性能指标:', metrics);
    
    // 计算布局偏移
    const cls = imageTools.calculateLayoutShift(imageUrl, 800, 600);
    console.log('布局偏移分数:', cls);
    
    // 上报数据
    await imageTools.reportImageData(imageUrl, {
      page: window.location.href,
      elementId: 'hero-image',
      expectedWidth: 800,
      expectedHeight: 600
    });
  } catch (error) {
    console.error('操作失败:', error);
  }
}


// 基本使用
async function exampleFPBasicUsage() {
  try {
    const imageUrl = 'https://example.com/image.jpg';
    const info = await getImageInfo(imageUrl);
    console.log('图片信息(FP):', info);
  } catch (error) {
    console.error('获取图片信息失败:', error);
  }
}

// 自定义配置
async function exampleFPCustomConfig() {
  try {
    // 创建自定义配置的工具函数
    const customGetImageInfo = imageToolsFP.createGetImageInfo(10000);
    const customGetDetails = imageToolsFP.createGetImageDetails(customGetImageInfo, {
      headers: {
        'Authorization': 'Bearer token123'
      }
    });
    const customReport = imageToolsFP.createReportImageData('https://custom-api.com/report');
    
    const imageUrl = 'https://example.com/secure-image.jpg';
    const details = await customGetDetails(imageUrl);
    console.log('自定义配置获取图片详情:', details);
    
    // 自定义上报
    await sendLogs(imageUrl, {
      source: 'custom-module',
      priority: 'high'
    });
  } catch (error) {
    console.error('自定义配置操作失败:', error);
  }
}

// 批量处理和性能分析
async function exampleFPBatchProcessing() {
  const imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ];
  
  try {
    // 并行获取所有图片信息
    const promises = imageUrls.map(url => getImageDetails(url));
    const results = await Promise.all(promises);
    
    // 分析性能数据
    const allMetrics = imageToolsFP.getAllPerformanceData();
    
    // 计算平均加载时间
    const totalLoadTime = results.reduce((sum, result) => sum + result.loadTime, 0);
    const avgLoadTime = totalLoadTime / results.length;
    
    // 计算总大小
    const totalSize = results.reduce((sum, result) => sum + result.size, 0);
    
    console.log('批量处理结果:');
    console.log('平均加载时间:', avgLoadTime.toFixed(2), 'ms');
    console.log('总大小:', (totalSize / 1024).toFixed(2), 'KB');
    console.log('所有性能数据:', allMetrics);
    
    // 清除特定图片的性能数据
    imageToolsFP.clearPerformanceData(imageUrls[0]);
  } catch (error) {
    console.error('批量处理失败:', error);
  }
}


// 图片资源优化分析
async function exampleImageOptimizationAnalysis() {
  try {
    const imageUrl = 'https://example.com/large-image.jpg';
    const details = await getImageDetails(imageUrl);
    
    // 分析图片是否需要优化
    const sizeInKB = details.size / 1024;
    const resolution = details.naturalWidth * details.naturalHeight;
    const dpr = window.devicePixelRatio;
    
    // 判断标准示例
    const shouldOptimize = {
      sizeTooLarge: sizeInKB > 500, // 大于500KB
      resolutionTooHigh: resolution > 2000 * 1500 * dpr * dpr, // 超过设备所需分辨率
      loadTimeTooLong: details.loadTime > 2000 // 加载时间超过2秒
    };
    
    console.log('图片优化建议:', {
      ...shouldOptimize,
      currentSizeKB: sizeInKB.toFixed(2),
      currentResolution: `${details.naturalWidth}x${details.naturalHeight}`,
      loadTimeMS: details.loadTime.toFixed(2),
      recommendations: [
        shouldOptimize.sizeTooLarge ? '压缩图片文件大小' : '',
        shouldOptimize.resolutionTooHigh ? '提供合适分辨率的图片' : '',
        shouldOptimize.loadTimeTooLong ? '使用CDN加速或WebP格式' : ''
      ].filter(Boolean)
    });
  } catch (error) {
    console.error('图片优化分析失败:', error);
  }
}

// 示例3.2: 响应式图片加载策略
async function exampleResponsiveImageLoading() {
  try {
    // 根据设备像素比选择合适的图片
    const dpr = window.devicePixelRatio;
    const viewportWidth = window.innerWidth;
    
    // 计算合适的图片尺寸
    const targetWidth = Math.min(viewportWidth * 0.8, 1200); // 最大1200px宽度
    const idealWidth = Math.ceil(targetWidth * dpr); // 根据DPR调整
    
    // 选择最合适的图片URL
    let selectedImageUrl = 'https://example.com/image-800w.jpg'; // 默认
    
    if (idealWidth <= 800) {
      selectedImageUrl = 'https://example.com/image-800w.jpg';
    } else if (idealWidth <= 1200) {
      selectedImageUrl = 'https://example.com/image-1200w.jpg';
    } else {
      selectedImageUrl = 'https://example.com/image-1600w.jpg';
    }
    
    console.log('根据设备选择的图片:', {
      dpr,
      viewportWidth,
      targetWidth,
      idealWidth,
      selectedImageUrl
    });
    
    // 加载选择的图片
    const image = new Image();
    image.src = selectedImageUrl;
    
    // 获取图片信息并监控性能
    const info = await getImageInfo(selectedImageUrl);
    
    // 上报选择策略和结果
    await reportImageData(selectedImageUrl, {
      strategy: 'responsive-dpr',
      targetWidth,
      idealWidth,
      viewportWidth,
      dpr
    });
    
    return image;
  } catch (error) {
    console.error('响应式图片加载失败:', error);
  }
}