如何使用JavaScript捕获多图并动态生成canvas存入Django数据库

实现方案 #

1. 前端HTML修改 #

去掉原有固定的canvas和单文本input，增加容器用来存放动态生成的捕获结果，用数组形式的隐藏input存储所有图片数据：

<form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
    <!-- 存储所有捕获的图片预览和对应数据的容器 -->
    <div id="captured-imgs-container"></div>
    <video id="player" controls autoplay></video>
    <!-- 给捕获按钮加type属性避免默认提交表单 -->
    <button type="button" id="capture">Capture</button>
    <button class="header pt-2  text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
</form>

2. 前端JS逻辑修改 #

每次点击捕获按钮时动态生成新的canvas渲染当前视频帧，同时生成对应的隐藏input存入图片base64数据：

const player = document.getElementById('player');
const captureButton = document.getElementById('capture');
const imgsContainer = document.getElementById('captured-imgs-container');
const constraints = {
  video: true,
};
  
captureButton.addEventListener('click', (e) => {
  e.preventDefault();
  // 动态创建新的canvas
  const newCanvas = document.createElement('canvas');
  newCanvas.width = 320;
  newCanvas.height = 240;
  const context = newCanvas.getContext('2d');
  // 绘制当前视频帧到新canvas
  context.drawImage(player, 0, 0, newCanvas.width, newCanvas.height);
  const imgFormat = newCanvas.toDataURL();
  
  // 创建隐藏input存储当前图片数据，name加[]让后端可以接收为数组
  const imgInput = document.createElement('input');
  imgInput.type = 'hidden';
  imgInput.name = 'documents[]';
  imgInput.value = imgFormat;
  
  // 把canvas（用于用户预览）和input（用于提交数据）都加入容器
  imgsContainer.appendChild(newCanvas);
  imgsContainer.appendChild(imgInput);
});
  
navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    player.srcObject = stream;
  });  

3. Django后端处理 #

在视图函数中接收图片数组，解析base64数据存入数据库即可：

import base64
from django.core.files.base import ContentFile
from .models import YourImageModel # 替换为你自己的图片模型类

def save_captured_imgs(request):
    if request.method == "POST":
        # 获取所有捕获的图片base64数组
        img_list = request.POST.getlist('documents[]')
        for img_base64 in img_list:
            # 解析base64转为文件对象
            format, img_content = img_base64.split(';base64,')
            ext = format.split('/')[-1]
            img_file = ContentFile(base64.b64decode(img_content), name=f'captured_{id}.{ext}')
            # 存入数据库，image_field替换为你模型里的图片字段名
            YourImageModel.objects.create(image_field=img_file)
        # 后续自定义提交成功后的返回逻辑

如果多张图片需要关联到同一个主记录，先创建主记录，再循环创建图片记录关联到对应主记录即可。

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