wx.getImageInfo({ src: tempFilePath, success: async (imgInfo) => { try { callBack && callBack(imgInfo) } }, fail: () => {} }) 上面这段代码应该放在下面的代码什么位置？ addPic: function () { wx.chooseImage({ sizeType: ['compressed'], success: (imgRes) => { callBack && callBack(imgRes); }, fail: () => {}, }) },

这段代码应该放在选择图片成功的回调函数中，也就是在`success: (imgRes) => { }`这个箭头函数的代码块中。具体代码如下：

addPic: function () {
  wx.chooseImage({
    sizeType: ['compressed'],
    success: (imgRes) => {
      wx.getImageInfo({
        src: imgRes.tempFilePaths[0],
        success: async (imgInfo) => {
          callBack && callBack(imgInfo);
        },
        fail: () => {},
      });
    },
    fail: () => {},
  });
}

在选择图片成功后，会调用`wx.getImageInfo`方法获取选择的图片信息，其中`tempFilePaths[0]`是选择的图片临时文件路径。成功获取图片信息后，将调用回调函数并将图片信息传递给回调函数。如果获取图片信息失败，将不会执行任何操作。

相关问题

通过前端，在小程序中进行图片压缩，能使用的当然就是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 进行图片缩小的详细步骤，希望能对你有所帮助。

创建一个canvas元素(id为checkCanvas)，获取对应的上下文对象，并设置图片宽高最大不能超过120，代码如下：const SIZE = 120 const ratio = Math.max(imgInfo.width / SIZE, imgInfo.height / SIZE, 1) const smallWidth = Math.trunc(imgInfo.width / ratio) const smallHeight = Math.trunc(imgInfo.height / ratio) // 将宽高大小设置到页面的canvas元素(checkCanvas)上 this.smallWidth = smallWidth this.smallHeight = smallHeight const ctx = wx.createCanvasContext('checkCanvas') ctx.drawImage(imgInfo.path, 0, 0, smallWidth, smallHeight) ctx.draw(false, function () { setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'checkCanvas', width: smallWidth, height: smallHeight, destWidth: smallWidth, destHeight: smallHeight, success: (res) => { resolve(res.tempFilePath) }, fail: (e) => { reject(e) } }) }, 100) })，怎么按照上面的步骤结合 addPic: function () { wx.chooseImage({ sizeType: ['compressed'], success: (imgRes) => { wx.getImageInfo({ src: imgRes.tempFilePaths[0], success: async (imgInfo) => { callBack && callBack(imgInfo); }, fail: () => {}, }); }, fail: () => {}, }) }进行操作

好的，我可以帮你将这段代码添加到addPic函数中。你需要在addPic函数中添加以下代码：

addPic: function (callBack) {
  wx.chooseImage({
    sizeType: ['compressed'],
    success: (imgRes) => {
      wx.getImageInfo({
        src: imgRes.tempFilePaths[0],
        success: async (imgInfo) => {
          const SIZE = 120
          const ratio = Math.max(imgInfo.width / SIZE, imgInfo.height / SIZE, 1)
          const smallWidth = Math.trunc(imgInfo.width / ratio)
          const smallHeight = Math.trunc(imgInfo.height / ratio)
          const ctx = wx.createCanvasContext('checkCanvas')
          ctx.drawImage(imgInfo.path, 0, 0, smallWidth, smallHeight)
          ctx.draw(false, function () {
            setTimeout(() => {
              wx.canvasToTempFilePath({
                canvasId: 'checkCanvas',
                width: smallWidth,
                height: smallHeight,
                destWidth: smallWidth,
                destHeight: smallHeight,
                success: (res) => {
                  callBack && callBack(res.tempFilePath)
                },
                fail: (e) => {
                  console.log(e)
                }
              })
            }, 100)
          })
        },
        fail: () => {},
      });
    },
    fail: () => {},
  })
}

这样，当你调用addPic函数时，它将会选择一张图片，然后将图片压缩至宽高最大不能超过120，并将其绘制到名为“checkCanvas”的canvas元素上，最后将canvas元素转换为临时文件路径并返回给回调函数。