Node.js中Base64转JPEG文件方法咨询（React截图存Azure Blob场景）

当然有可行的方案！我来一步步给你捋清楚整个流程——从React端捕获Base64截图，到Node.js后端转换为JPEG文件，再上传到Azure Blob Storage，每一步都给你具体的代码示例～

1. 前端（React）捕获JPEG格式的Base64截图 #

首先在React中用react-webcam捕获截图时，直接指定截图格式为JPEG，这样拿到的Base64字符串就是JPEG编码的，后续后端处理更省心。

import React, { useRef } from 'react';
import Webcam from 'react-webcam';

const WebcamCapture = () => {
  const webcamRef = useRef(null);

  const captureAndUpload = async () => {
    // 获取JPEG格式的Base64截图
    const imageBase64 = webcamRef.current.getScreenshot();
    if (!imageBase64) {
      alert('捕获截图失败，请检查摄像头权限');
      return;
    }

    // 发送到Node.js后端接口
    try {
      const response = await fetch('/api/upload-screenshot', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ imageBase64 }),
      });
      const result = await response.json();
      console.log('上传成功:', result.blobUrl);
    } catch (err) {
      console.error('上传出错:', err);
    }
  };

  return (
    <div>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg" // 关键：指定JPEG格式
        width={640}
        height={480}
        style={{ border: '1px solid #ccc' }}
      />
      <button onClick={captureAndUpload} style={{ marginTop: '10px' }}>
        捕获并上传截图
      </button>
    </div>
  );
};

export default WebcamCapture;

2. Node.js后端：Base64转JPEG Buffer并上传Azure Blob #

后端接收到Base64字符串后，先去掉前缀（data:image/jpeg;base64,），再转换为Node.js的Buffer对象——这就是标准的JPEG二进制数据，直接就能上传到Azure Blob Storage。

这里以Express框架为例，同时使用Azure官方的@azure/storage-blob库：

const express = require('express');
const router = express.Router();
const { BlobServiceClient } = require('@azure/storage-blob');

// 从环境变量读取Azure存储连接字符串（不要硬编码！）
const AZURE_STORAGE_CONNECTION_STRING = process.env.AZURE_STORAGE_CONNECTION_STRING;
const CONTAINER_NAME = 'your-screenshot-container'; // 替换成你的Blob容器名

router.post('/upload-screenshot', async (req, res) => {
  try {
    const { imageBase64 } = req.body;

    // 校验Base64格式是否合法
    if (!imageBase64 || !imageBase64.startsWith('data:image/jpeg;base64,')) {
      return res.status(400).json({ error: '无效的JPEG Base64截图' });
    }

    // 移除Base64前缀，转换为Buffer
    const base64Payload = imageBase64.replace(/^data:image\/jpeg;base64,/, '');
    const jpegBuffer = Buffer.from(base64Payload, 'base64');

    // 初始化Azure Blob客户端
    const blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
    const containerClient = blobServiceClient.getContainerClient(CONTAINER_NAME);
    // 生成唯一的Blob文件名（避免重复）
    const blobName = `screenshot_${Date.now()}.jpeg`;
    const blockBlobClient = containerClient.getBlockBlobClient(blobName);

    // 上传JPEG Buffer到Blob Storage
    await blockBlobClient.uploadData(jpegBuffer, {
      blobHTTPHeaders: {
        blobContentType: 'image/jpeg', // 明确指定MIME类型
      },
    });

    res.status(200).json({
      message: '截图上传成功',
      blobUrl: blockBlobClient.url // 返回Blob的访问地址
    });
  } catch (error) {
    console.error('上传Azure Blob失败:', error);
    res.status(500).json({ error: '服务器内部错误，请重试' });
  }
});

module.exports = router;

3. 额外注意事项 #

• 如果前端不小心捕获了PNG格式的Base64，想在后端转成JPEG，可以用sharp库处理：安装sharp后，通过sharp(pngBuffer).jpeg().toBuffer()就能转换为JPEG格式的Buffer。
• 确保Azure Blob容器的权限设置正确（比如允许匿名读取，或者生成SAS令牌访问）。
• 生产环境中建议对Base64字符串做大小限制，避免过大的请求导致服务器压力过大。

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