how to decode base64 data into image django - js

Question

im trying to save captured image ( encoding data) into database from canvas, but it only saves a blank image?

here is my code

 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'); const imgFormat = canvas.toDataURL(); docs.value = imgFormat context.drawImage(player, 0, 0, canvas.width, canvas.height); 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>

and here is my views.py with models.py

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

my views.py

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')
        format, imgstr = data.split(';base64,') 
        ext = format.split('/')[-1] 

        data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)      
        if data:      
            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,_('choose or capture right image ..'))
        
    return render(request,'booking/add_img.html',{'obj':obj,'form':images})

i much appreciate your helps, please if you know something about it let me know, thank you so much

Answer 1

You need to draw first then get the content.

---

For how to do multiple capture.

You can reuse the same canvas, the toDataURL is a snapshot of current canvas.

Here is an example.

 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) // this is just an example, you need a <input> so it's send by form (or use async request) let new_image = document.createElement('img') new_image.src = canvas.toDataURL() form.insertAdjacentElement('beforeend',new_image) }); navigator.mediaDevices.getUserMedia({video: true}).then((stream) => { player.srcObject = stream;})

 form *{max-width:20vw;} img{display:inline-block;} canvas{display:none;}

 <form id="form" action="" method="POST" enctype="multipart/form-data"> <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>

https://jsfiddle.net/271pvxa3/