通过前端，在小程序中进行图片压缩，能使用的当然就是canvas了，我们先通过 getImageInfo 接口获取图片的宽高信息： wx.getImageInfo({ src: tempFilePath, success: async (imgInfo) => { try { callBack && callBack(imgInfo) } }, fail: () => {} }) 1 2 3 4 5 6 7 8 9 以上代码，获取到图片的信息 imgInfo，将包含图片本地路径、宽度、高度以及各式信息等，而我们缩小图片必须使用到宽高数据。 缩小图片，我们创建一个canvas元素(id为checkCanvas)，获取对应的上下文对象，并设置图片宽高最大不能超过120,请告诉我详细操作步骤

好的，以下是详细的操作步骤：

1. 首先需要在小程序页面的 WXML 文件中添加一个 canvas 元素，并设置好其 ID 和宽高：

<canvas id="checkCanvas" style="width: 120rpx; height: 120rpx;"></canvas>

2. 在小程序页面的 JS 文件中，引入图片路径，并获取该图片的宽高信息：

wx.getImageInfo({
  src: tempFilePath,
  success: async (imgInfo) => {
    try {
      // 在这里获取到了图片的宽高信息 imgInfo
      console.log(imgInfo);

      // 将宽高信息传递给下一步操作
      this.compressImage(imgInfo.width, imgInfo.height);
    } catch (err) {
      console.log(err);
    }
  },
  fail: () => {}
});

3. 在 JS 文件中，定义一个 compressImage 函数，用于缩小图片并将其转换为临时文件路径：

compressImage: function(width, height) {
  // 创建 canvas 元素，并获取其上下文对象
  const canvas = wx.createCanvasContext('checkCanvas');

  // 计算缩小后的图片宽高
  const canvasWidth = width > 120 ? 120 : width;
  const canvasHeight = height > 120 ? 120 : height;

  // 清空 canvas 元素，并将图片绘制在其中
  canvas.clearRect(0, 0, canvasWidth, canvasHeight);
  canvas.drawImage(tempFilePath, 0, 0, canvasWidth, canvasHeight);

  // 将 canvas 转换为临时文件路径
  canvas.draw(false, () => {
    wx.canvasToTempFilePath({
      canvasId: 'checkCanvas',
      success: (res) => {
        console.log(res.tempFilePath);
        // 在这里可以将缩小后的图片路径进行上传等操作
      },
      fail: () => {}
    });
  });
}

4. 最后，需要注意的是，以上代码中的 tempFilePath 变量需要在 JS 文件中进行定义和赋值，以便在 getImageInfo 函数中使用。同时，还需要在小程序的 app.json 文件中添加相应的权限设置，以便可以访问图片和生成临时文件路径：

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
      },
      "scope.writePhotosAlbum": {
        "desc": "你的相册将用于保存图片"
      },
      "scope.camera": {
        "desc": "你的摄像头将用于扫码"
      }
    }
  }
}

以上就是在小程序中使用 canvas 进行图片缩小的详细步骤，希望能对你有所帮助。