微信小程序：实现定时拍照与自动上传功能攻略——静音版

在之前的文章中，我介绍过可以用ctx.takePhoto来实现定时拍照，但是在实际使用过程中，会有快门声，影响用户体验感，本文中，我们将介绍如何在微信小程序中实现静音定时拍照功能，并将拍摄的照片上传到服务器。我们将使用onCameraFrame方法替代takePhoto来避免快门声。

一、静音定时拍照

首先，我们定义了一个getPhoto方法，该方法将使用onCameraFrame来捕获相机帧数据，并将其转换为图片，然后上传到服务器。

getPhoto(ctx) {
  let that = this;
  let bool = true;
  let listener = ctx.onCameraFrame((frame) => {
    if (bool) {
      let data = new Uint8Array(frame.data);
      let clamped = new Uint8ClampedArray(data);
      that.setData({
        canvasHeight: frame.height,
        canvasWidth: frame.width
      });
      wx.canvasPutImageData({
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: frame.width,
        height: frame.height,
        data: clamped,
        success(res) {
          // 转换临时文件
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: frame.width,
            height: frame.height,
            canvasId: 'myCanvas',
            success(res) {
              wx.uploadFile({
                url: app.globalData.url + '/imageToWords/uploadFile',
                filePath: res.tempFilePath,
                header: {
                  'content-type': 'multipart/form-data',
                  'Authorization': app.globalData.wstoken
                },
                name: 'upload',
                success(uploadRes) {
                  // 处理上传成功的结果
                  if (uploadRes.statusCode == 200) {
                    let data = JSON.parse(uploadRes.data);
                    if (data.success) {
                      that.voiceBroadcast(data.data);
                      let text = data.data.replace(/\n/g, "<br/>");
                      that.setData({ text: text });
                    } else {
                      util.errorAffirm(data.message);
                    }
                  } else {
                    util.errorAffirm(uploadRes.errMsg);
                  }
                }
              });
            },
            fail(err) {
              util.errorAffirm(err);
              console.log('转换失败', err);
            }
          }, that);
        },
        fail(err) {
          util.errorAffirm(err);
          console.log("canvasPutImageData 失败", err);
        }
      }, that);
    }
    bool = false;
    listener && listener.stop() && (listener = null);
  });
  listener.start();
}

在这个方法中，我们首先设置了一个bool标志，以确保只处理一次帧数据。然后，我们使用onCameraFrame监听相机帧数据，将数据转换为Uint8ClampedArray，并使用wx.canvasPutImageData将其绘制到画布上。接着，我们使用wx.canvasToTempFilePath将画布内容转换为临时文件路径，最后通过wx.uploadFile上传到服务器。

二、定时器设置

为了实现定时拍照，我们需要在timedPhotographing方法中调用getPhoto。

timedPhotographing() {
  const ctx = wx.createCameraContext();
  this.data.myTime = setInterval(() => {
    this.getPhoto(ctx);
  }, this.data.IntervalTime);
}

这里，我们使用setInterval设置了一个定时器，每隔IntervalTime毫秒调用一次getPhoto方法。

三、关闭定时拍照

当不需要定时拍照时，我们可以通过以下方法关闭定时器：

endTimedPhotograph() {
  clearInterval(this.data.myTime);
  this.data.myTime = null;
}

四、页面布局

在页面的WXML文件中，我们需要添加一个摄像头组件和一个画布组件来显示相机预览和绘制帧数据。

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 100%;"></camera>
<canvas canvas-id="myCanvas" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></canvas>

如果不想要展示canvas画布，可将style设置到屏幕外的地方。

通过以上步骤，我们成功实现了微信小程序的静音定时拍照与上传功能，用户可以定时拍摄照片而无需听到快门声，并将照片上传到服务器进行进一步处理。