如何将JS canvas的toDataURL数据传入Django 3.2视图保存摄像头拍摄图片

1. 前端JS+HTML修改 #

你当前的JS仅完成了将摄像头画面绘制到canvas的操作，没有发起请求传递数据，另外Django POST请求必须携带CSRF token否则会被拦截，修改后的代码如下：

const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
// 获取Django CSRF token
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
const constraints = {
  video: true,
};

captureButton.addEventListener('click', (e) => {
  e.preventDefault();
  // 绘制画面到canvas
  context.drawImage(player, 0, 0, canvas.width, canvas.height);
  // 转base64格式
  const imgBase64 = canvas.toDataURL('image/png');
  // 发起POST请求到Django接口
  fetch('替换为你的Django视图对应的接口URL', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-CSRFToken': csrftoken,
    },
    body: `canvas=${encodeURIComponent(imgBase64)}`
  }).then(res => res.json())
  .then(data => {
    console.log('上传完成', data);
  })
});

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    player.srcObject = stream;
  });  

HTML中需补充CSRF token的隐藏标签，直接加在页面任意位置即可：

{% csrf_token %}

2. Django视图修改 #

• request.is_ajax()在Django 3.1+版本已废弃，需自行判断请求类型
• base64数据存放在POST请求正文中，不是request.FILES中，取值逻辑需要调整
  修改后的视图代码：

import base64
from django.http import JsonResponse
from django.core.files.base import ContentFile

# 你的视图函数
...
if request.method == 'POST' and request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
    # 从POST参数中获取base64图片数据
    images = request.POST.get('canvas')
    print("images" , images)
    if not images:
        return JsonResponse({'status':'fail','msg':'未获取到图片数据'}, status=400)
    format, imgstr = images.split(';base64,') 
    ext = format.split('/')[-1] 
    dataimage = ContentFile(base64.b64decode(imgstr), name=f'temp.{ext}')
    # create方法会自动写入数据库，不需要额外调用save
    Document.objects.create(
        booking=obj,
        docs = dataimage
    )
    return JsonResponse({'status':'success'})

额外注意事项 #

• 确保你的upload_docs函数已正确定义，返回合法的上传路径
• 确保Django配置中MEDIA_ROOT、MEDIA_URL已正确配置，否则图片无法正常存储和访问

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