wx_wasm_webp/pages/index/index.js

// index.js
const { wasmMgr } = require('./utils.js');

Page({
  data: {
    originalImage: '', // 原始图片路径
    compressedImage: '', // 压缩后图片路径
    originalSize: 0, // 原始图片大小
    compressedSize: 0, // 压缩后图片大小
    compressing: false, // 是否正在压缩
    quality: 0.8, // 压缩质量
    targetWidth: 800, // 目标宽度
    targetHeight: 600, // 目标高度
    originalWidth: 0, // 原始宽度
    originalHeight: 0, // 原始高度
    showResult: false // 是否显示结果
  },

  // 选择图片
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePath = res.tempFilePaths[0];
        
        // 获取图片信息
        wx.getImageInfo({
          src: tempFilePath,
          success: (imgInfo) => {
            this.setData({
              originalImage: tempFilePath,
              originalWidth: imgInfo.width,
              originalHeight: imgInfo.height,
              targetWidth: imgInfo.width,
              targetHeight: imgInfo.height,
              showResult: false
            });
            
            // 获取文件大小
            wx.getFileInfo({
              filePath: tempFilePath,
              success: (fileInfo) => {
                this.setData({
                  originalSize: (fileInfo.size / 1024).toFixed(2) // KB
                });
              }
            });
          }
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
        console.error('选择图片失败', err);
      }
    });
  },

  // 压缩图片
  async compressImage() {
    if (!this.data.originalImage) {
      wx.showToast({
        title: '请先选择图片',
        icon: 'none'
      });
      return;
    }

    this.setData({ compressing: true });
    
    try {
      wx.showLoading({
        title: '压缩中...'
      });

      const compressedBase64 = await wasmMgr.compressImg(
        this.data.originalImage,
        this.data.quality,
        this.data.originalWidth,
        this.data.originalHeight,
        this.data.targetWidth,
        this.data.targetHeight
      );
      console.log(compressedBase64);
      // 将base64保存为临时文件
      const tempFilePath = await this.saveBase64ToFile(compressedBase64);
      
      // 获取压缩后文件大小
      wx.getFileInfo({
        filePath: tempFilePath,
        success: (fileInfo) => {
          this.setData({
            compressedImage: tempFilePath,
            compressedSize: (fileInfo.size / 1024).toFixed(2), // KB
            showResult: true
          });
        }
      });

      wx.hideLoading();
      wx.showToast({
        title: '压缩成功',
        icon: 'success'
      });
    } catch (error) {
      wx.hideLoading();
      wx.showToast({
        title: '压缩失败',
        icon: 'none'
      });
      console.error('压缩失败', error);
    } finally {
      this.setData({ compressing: false });
    }
  },

  // 将base64保存为临时文件
  saveBase64ToFile(base64Data) {
    return new Promise((resolve, reject) => {
      // 去掉data:image/webp;base64,前缀
      const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
      
      // 创建文件管理器
      const fs = wx.getFileSystemManager();
      
      // 生成临时文件路径
      const tempFilePath = `${wx.env.USER_DATA_PATH}/compressed_${Date.now()}.webp`;
      
      // 将base64写入文件
      fs.writeFile({
        filePath: tempFilePath,
        data: base64,
        encoding: 'base64',
        success: () => {
          resolve(tempFilePath);
        },
        fail: (err) => {
          console.error('保存文件失败', err);
          reject(err);
        }
      });
    });
  },

  // 保存压缩后的图片到相册
  saveImageToAlbum() {
    if (!this.data.compressedImage) {
      wx.showToast({
        title: '没有可保存的图片',
        icon: 'none'
      });
      return;
    }

    wx.saveImageToPhotosAlbum({
      filePath: this.data.compressedImage,
      success: () => {
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        });
      },
      fail: (err) => {
        if (err.errMsg.includes('auth deny')) {
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            success: (res) => {
              if (res.confirm) {
                wx.openSetting();
              }
            }
          });
        } else {
          wx.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
        console.error('保存图片失败', err);
      }
    });
  },

  // 质量滑块变化
  onQualityChange(e) {
    this.setData({
      quality: e.detail.value/100
    });
  },

  // 宽度输入变化
  onWidthChange(e) {
    this.setData({
      targetWidth: parseInt(e.detail.value) || 0
    });
  },

  // 高度输入变化
  onHeightChange(e) {
    this.setData({
      targetHeight: parseInt(e.detail.value) || 0
    });
  }
});