如何在react-webcam中旋转getScreenshot方法捕获的图片？

我来帮你搞定这个问题！你之前尝试的旋转预览画面、给图片元素加transform: rotate(90deg)都只是视觉层面的临时调整，并没有修改getScreenshot()获取到的原始base64图片数据，所以最终保存的还是横向的图片。要真正实现捕获时自动旋转90度，我们需要对捕获到的base64图片进行实际的像素处理，这里用Canvas就能轻松实现。

解决方案步骤 #

1. 编写图片旋转工具函数 #

先写一个异步的工具函数，接收原始base64图片和旋转角度，返回旋转后的新base64：

const rotateImage = (base64, angle) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 解决跨域问题（如果图片来自同源可以忽略）
    img.crossOrigin = 'anonymous';
    img.src = base64;

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 根据旋转角度调整画布尺寸：90/270度时宽高互换
      if (angle === 90 || angle === 270) {
        canvas.width = img.height;
        canvas.height = img.width;
      } else {
        canvas.width = img.width;
        canvas.height = img.height;
      }

      // 将画布原点移到中心，旋转后绘制图片
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate((angle * Math.PI) / 180);
      ctx.drawImage(img, -img.width / 2, -img.height / 2);

      // 生成旋转后的base64图片
      resolve(canvas.toDataURL('image/png'));
    };

    img.onerror = (err) => reject(`图片加载失败：${err}`);
  });
};

2. 修改捕获方法 #

把原来的capture方法改成异步函数，调用工具函数处理图片后再更新状态：

capture = async () => { 
  const originalImage = this.webcam.getScreenshot();
  if (!originalImage) {
    console.warn('未捕获到图片');
    return;
  }

  try {
    // 旋转90度，如果方向不对可以改成270度
    const rotatedImage = await rotateImage(originalImage, 90);
    this.setState({ 
      picsArray: [...this.state.picsArray, rotatedImage], 
    });
  } catch (error) {
    console.error('图片旋转失败:', error);
    // 失败时 fallback 到原始图片
    this.setState({ 
      picsArray: [...this.state.picsArray, originalImage], 
    });
  }
};

为什么这个方法有效？ #

这个方法直接操作图片的像素数据：通过Canvas把原始图片旋转后重新生成base64，所以最终保存到picsArray里的就是已经旋转好的纵向图片，不管是展示还是后续上传，都是正确的方向，不需要依赖CSS旋转。

如果你的设备摄像头方向特殊，旋转90度不对，可以尝试把角度改成270，就能得到反向的纵向效果。

内容的提问来源于stack exchange，提问作者Harry