收藏
回答

在HarmonyOs 6.0 、5.0 wx.compressImage 无法对图片进行压缩

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug compressImage 鸿蒙客户端 8.0.11 3.11.0(2025.10.28.20:58:36)

wx.compressImage 在开发工具的模拟器中此函数运行正常图片大小能正常压缩,

然而在真机中只是成功反回了成功却没有对图片做任何压缩处理。

下面是手机系统

运用上面的代码其他平台原本3M的图片能被压缩早1M以内,在当前系统下依然是3M 却走了success 回调。

回答关注问题邀请回答
收藏

2 个回答

  • A_ETC_17603115734
    A_ETC_17603115734
    2025-10-31

    目前我们的解决方案如下,还是期待官方解决此问题

    // 读取是否是需要压缩,如果是判断是否是鸿蒙系统;
     if(deviceInfo.platform == 'ohos'){
       if(deviceInfo.system.includes("OpenHarmonyOS")){
        // 鸿蒙系统 压缩放到Canvas 中进行处理
        let imgData =  res.tempFiles[0];
        imgData['isCanvas'] = true;
        resolve(imgData);
        return;
    



    // 创建组件CanvasImgTool
    Component({
    
    
      /**
       * 组件的属性列表
       */
      properties: {
        max_w_h: {
           type: Number,
           value: 700,
       },
      },
      /**
       * 组件的初始数据
       */
      data: {
    
    
      },
    
    
      /**
       * 组件的方法列表
       */
      methods: {
        // 传入图片路径返回压缩后的图片
        async compressImage(imagePath){
          const that = this;
          return await new Promise((resolve, reject) => {
            wx.getImageInfo({
              src: imagePath,
              success:async(res)=>{
                 let response = that.drawImageToCanvas(res.path,res.width,res.height);
                 resolve(response);
              },
              fail: (err) => {
                reject(err);
              }
            });
          });
        },
        // 绘制图片到canvas
      async drawImageToCanvas(imagePath,imgW,imgH) {
        const that = this
        const query = this.createSelectorQuery()
        return await new Promise((resolve, reject) => {
          query.select('#img_tool_canvas')
          .fields({  node: true, 
                size: true})
          .exec((res) => {
            if (!res[0]) {
              console.error('Canvas element not found');
              return;
            }
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            canvas.width = imgW;
            canvas.height = imgH;
            // 创建图片对象
            const image = canvas.createImage()
            image.onload = async () => {
              // 清除画布
              ctx.clearRect(0, 0, imgW,  imgH)
              const x = 0;
              const y = 0;
              ctx.drawImage(image, x, y, imgW, imgH)
              let res = await that.canvasGetImage(imgW,imgH);
              resolve(res);
            }
            image.src = imagePath;
          })
        });
      },
      // 获取canvas图片 返回图片路径
      async canvasGetImage(imgW,imgH) {
        const query = this.createSelectorQuery()
        let max_w_h = this.properties.max_w_h; 
        let isHor = imgW >imgH ?true:false;
        let w =  isHor?max_w_h:max_w_h * imgW / imgH ;
        let h = isHor?max_w_h * imgH / imgW :max_w_h;
        return await new Promise((resolve, reject) => {
          query.select('#img_tool_canvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              destWidth: w, 
              destHeight: h,  
              quality:0.4,
              fileType:'png',
              canvas: canvas,
              success(res) {
                resolve(res.tempFilePath);
              },
              fail(err) {
                reject(err);
                console.error('保存失败:', err)
              }
            })
          })
        });
       }
      }
    })
    

    wxml

    <view class="canvas-box" style="width: 500px; height: 500px;">

      <canvas id="img_tool_canvas" type="2d"  style="width:500px; height: 500px;"></canvas>
    </view>
    


    #css

    .canvas-box{
      position: absolute;
      position: fixed;
      top: -1000rpx;
      z-index: -10;
      left: -999999px;
      overflow: visible;
    }
    


    写工具方便页面调用

    class CompressTool {
      // 
      static async compressImageTool(ctx,imagePath){
        return await ctx.selectComponent('#canvasImgTool').compressImage(imagePath);
     }
    }
    
    
    export default CompressTool
    


    在要使用的页面上:

    wxml

    <CanvasImgTool id="canvasImgTool"/>
    
    
    


    js 文件中:

    path = await CompressTool.compressImageTool(this,path);
    


    2025-10-31
    有用 2
    回复
  • 智能回答 智能回答 本次回答由AI生成
    2025-10-29
    有用
登录 后发表内容