Django+JS实现canvas捕获图像转base64存库时出现空白图片如何解决

问题根因 #

• 核心错误是前端JS捕获逻辑的执行顺序颠倒：你先从canvas导出base64数据，再把视频帧绘制到canvas上，导出的自然是canvas初始化的空白内容。

修复方案 #

1. 调整JS执行顺序 #

把toDataURL()和给input赋值的逻辑，放到drawImage()之后，修改后的JS代码如下：

const player = document.getElementById('player');
const docs = document.getElementById('document')
const captureButton = document.getElementById('capture');
const constraints = {
  video: true,
};

captureButton.addEventListener('click', (e) => {
  e.preventDefault();
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  // 先把视频帧绘制到canvas
  context.drawImage(player, 0, 0, canvas.width, canvas.height);
  // 再导出base64赋值给表单字段
  const imgFormat = canvas.toDataURL();
  docs.value = imgFormat 
});

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

2. 可选优化 #

1. 表单里的documents输入框不需要展示给用户，可以改成隐藏类型，避免误改：

<input type="hidden" name="documents" id="document">

2. 后端增加空值校验，避免前端未捕获到有效内容时报错，同时可以删除冗余的photo.save()（objects.create本身就会完成数据写入，不需要重复保存），修改后的views代码如下：

import base64
from django.core.files.base import ContentFile
@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        data = request.POST.get('documents', '')
        # 增加有效性校验
        if not data or ';base64,' not in data:
            messages.error(request,_('未捕获到有效图像，请重试'))
            return render(request,'booking/add_img.html',{'obj':obj,'form':images})
        format, imgstr = data.split(';base64,') 
        ext = format.split('/')[-1] 
        data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)      
        Document.objects.create(
            booking = obj,
            docs = data
        )    
        return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
    else:
        messages.error(request,_('choose or capture right image ..'))
    return render(request,'booking/add_img.html',{'obj':obj,'form':images})

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