Как получить доступ к html-тегу изображения из представления django?

Мне нужно получить доступ к html-тегу <img> из django, я использую веб-камеру для захвата нескольких изображений и добавления их в базу данных, но я не знаю, как использовать POST.get(тег img)?

вот что я пытаюсь сделать ...

class Document(models.Model):
    booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
    docs = models.ImageField(upload_to=upload_docs)

my views.py

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        images = request.POST.get('images')
        print(images)
        format, imgstr = images.split(';base64,') 
        ext = format.split('/')[-1] 
        data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
        photo = Document.objects.create(
            booking = obj,
            docs = data                
        )
        photo.save()
        return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
    else:
        messages.error(request,_('capture right image ..'))
    return render(request,'booking/add_img.html',{'obj':obj})

и вот мой html и js код

      const player = document.getElementById('player')
      const canvas = document.getElementById('canvas')
      const form = document.getElementById('form')
      const docs = document.getElementById('document')
      const captureButton = document.getElementById('capture')
      const context = canvas.getContext('2d')
      
      
      captureButton.addEventListener('click', (e) => {
        context.drawImage(player, 0, 0, canvas.width, canvas.height)
        e.preventDefault();
        let new_image = document.createElement('img')
        new_image.src = canvas.toDataURL()
        console.log(new_image)
        new_image.setAttribute("name","images")
        form.insertAdjacentElement('beforeend',new_image)
      });
      
      navigator.mediaDevices.getUserMedia({video: true})
        .then((stream) => { player.srcObject = stream;})      
<style>
    form *{max-width:20vw;}
    img{display:inline-block;}
    canvas{display:none;}    
</style>
    
<form id="form" action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
   <video id="player" controls autoplay></video>
   <button type="button" id="capture">Capture</button>
   <button>save</button>
   <canvas id="canvas" width=320 height=240></canvas>
</form>

есть ли способ достичь этого? Я могу сохранить одно изображение таким образом :

        const player = document.getElementById('player');   
        const docs = document.getElementById('document')
        const captureButton = document.getElementById('capture');
        const constraints = {
          video: true,
        };
      
        captureButton.addEventListener('click', (e) => {
          const canvas = document.getElementById('canvas');
          const context = canvas.getContext('2d'); 
          context.drawImage(player, 0, 0, canvas.width, canvas.height);
          const imgFormat = canvas.toDataURL();
          docs.value = imgFormat          
          e.preventDefault();
         
        });
      
        navigator.mediaDevices.getUserMedia(constraints)
          .then((stream) => {
            player.srcObject = stream;
          }); 
<form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}

                <input type="text" name="documents" id="document">
                <video id="player" controls autoplay></video>
                <button id="capture">Capture</button>
                <canvas id="canvas" width=320 height=240></canvas>
               

                <button class="header pt-2  text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
            </form>

но мне нужно несколько изображений в одной кнопке сохранения! или мы можем сделать <input type="file" multiple name="documents" id="document"> затем добавить каждое захваченное изображение в этот вход, или вход типа текст, но отделить каждое новое захваченное изображение в представлении django с помощью split? большое спасибо ..

Вернуться на верх