MoeNovaClient/MoeNovaClientH5/utils/imageConverter.js

/**
 * 图片转换工具
 * 提供将PNG/JPG图片转换为ICO格式的工具函数
 */

/**
 * 将BASE64图片数据转换为ICO格式
 * @param {String} base64Data - BASE64编码的图片数据
 * @param {Number} size - 图标尺寸(默认32)
 * @returns {Promise<String>} - 返回BASE64编码的ICO数据
 */
export function convertToIco(base64Data, size = 32) {
  // #ifdef H5
  return new Promise((resolve, reject) => {
    try {
      const image = new Image();
      image.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, size, size);
        
        // 获取ICO格式的BASE64数据
        // 注: 这只是模拟的, 实际上Canvas无法直接导出ICO格式
        // 在实际应用中, 应该使用Node.js后端或第三方服务进行转换
        const pngBase64 = canvas.toDataURL('image/png');
        
        console.log('图像已转换为PNG格式, 需要服务端转换为ICO');
        resolve(pngBase64);
      };
      
      image.onerror = function() {
        reject(new Error('图片加载失败'));
      };
      
      image.src = base64Data;
    } catch (error) {
      reject(error);
    }
  });
  // #endif
  
  // 非H5环境
  // #ifndef H5
  return Promise.reject(new Error('当前环境不支持图片转换'));
  // #endif
}

/**
 * 将图片文件转换为ICO文件
 * @param {File} file - 图片文件
 * @param {Number} size - 图标尺寸(默认32)
 * @returns {Promise<Blob>} - 返回ICO格式的Blob数据
 */
export function convertFileToIco(file, size = 32) {
  // #ifdef H5
  return new Promise((resolve, reject) => {
    try {
      const reader = new FileReader();
      reader.onload = function(e) {
        convertToIco(e.target.result, size)
          .then(base64Data => {
            // 将BASE64转换为Blob
            const byteString = atob(base64Data.split(',')[1]);
            const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
            const ab = new ArrayBuffer(byteString.length);
            const ia = new Uint8Array(ab);
            
            for (let i = 0; i < byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
            }
            
            const blob = new Blob([ab], {type: mimeString});
            resolve(blob);
          })
          .catch(reject);
      };
      
      reader.onerror = function() {
        reject(new Error('文件读取失败'));
      };
      
      reader.readAsDataURL(file);
    } catch (error) {
      reject(error);
    }
  });
  // #endif
  
  // 非H5环境
  // #ifndef H5
  return Promise.reject(new Error('当前环境不支持图片转换'));
  // #endif
}

/**
 * 显示如何在Windows系统上转换ICO的提示信息
 * @returns {String} 转换提示信息
 */
export function getIconConversionGuide() {
  return `
将图片转换为ICO格式的方法:

1. 在线转换工具:
   - 访问 https://www.favicon-generator.org/ 或 https://convertio.co/zh/png-ico/
   - 上传您的图片(建议是正方形图片)
   - 下载转换后的ICO文件

2. 使用Windows自带工具:
   - 打开画图(Paint)程序
   - 打开您的图片并调整大小为32x32或16x16像素
   - 另存为BMP格式
   - 使用图标编辑器转换为ICO(可使用Resource Hacker等工具)

3. 使用专业软件:
   - Adobe Photoshop配合ICO插件
   - GIMP等开源图像处理软件

推荐图标尺寸:
- 16x16: 浏览器标签页
- 32x32: Windows文件浏览器
- 48x48: Windows任务栏
  `;
}

export default {
  convertToIco,
  convertFileToIco,
  getIconConversionGuide
}