通过Base64编码在Python服务器与JS客户端间传输图片问题

服务端问题修复 #

• 必须先将ndarray转为图片字节流再编码
  直接对np.ndarray做base64编码无效，因为ndarray是数组结构，不是图片原始字节。需要先转成对应格式的字节数据：
  用OpenCV处理示例：

  import cv2
  import base64
  import json
  
  # img为加载后的np.ndarray（如cv2.imread返回的BGR格式）
  success, img_bytes = cv2.imencode('.jpg', img)
  if not success:
      raise ValueError("图片编码失败")
  # 生成base64字符串
  enc_img = base64.b64encode(img_bytes).decode("utf-8")
  # 构建并序列化JSON
  response = json.dumps({"image": enc_img})
  

  用Pillow处理示例：

  from PIL import Image
  import io
  import base64
  import json
  
  pil_img = Image.fromarray(img)
  img_byte_arr = io.BytesIO()
  pil_img.save(img_byte_arr, format='JPEG')
  enc_img = base64.b64encode(img_byte_arr.getvalue()).decode("utf-8")
  response = json.dumps({"image": enc_img})
  

客户端问题修复 #

• 移除不必要的b64EncodeUnicode处理
  服务端已经返回可直接使用的base64字符串，无需二次编码，直接拼接图片src：

  // 假设res是服务器返回的JSON数据
  const imgSrc = `data:image/jpeg;base64,${res.image}`;
  const img = document.createElement('img');
  img.src = imgSrc;
  document.body.appendChild(img);
  

• 确保格式匹配
  服务端用.jpg编码，客户端src就写image/jpeg；用.png编码则写image/png，二者必须一致。

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