1

I'm working with a webcam application and I am trying to integrate it into Django framework.

This is the function that takes a photo(it's javascript in static folder):

    // play sound effect
    shutter.play();

    // take snapshot and get image data
    Webcam.snap( function(data_uri) {
      // display results in page
      document.getElementById('results').innerHTML =
        '<img id="imageprev" src="'+data_uri+'"/>';
    } );
    document.getElementById("camera").outerHTML = "";

    Webcam.reset();
  }

This is a fraction from my template:

<div id="camera"></div>
<button onclick="takeSnapShot()" type="button" id="button1" class="button-1">Take Picture</button>
<form action="" enctype="multipart/form-data" method="POST">
        {% csrf_token %}
        <div name="results" id="results"></div>
        <div class="button-2">
            <button type="submit" href="/">Pateikti</button>
        </div>
</form>

So after picture taken, it displays an image inside < div > tag which id is "results" And now I want to save taken photograph. So I tried POST method, but when I do that, the template reloads, and the image gets lost. So I believe that's why I'm getting this error window. Also usually POST method used when you want to save files in your server which client uploads, so I'm not sure if this is the best way to do this

So my question is: Is there a method to save an image to your server from a template? Or am I using POST method wrong? I don't want to use PHP since I'm still new to programing

views.py for additional code:

from django.shortcuts import render
from .models import photo
from django.core.files.storage import FileSystemStorage
import datetime

# Create your views here.

def index(request):
    if request.method == 'POST':
        
        file=request.FILES['imageprev']
        fs=FileSystemStorage()
        filen = fs.save(datetime.datetime.now(), file)
        return render(request, 'index.html')
    else:
        return render(request, 'index.html')

models.py:

from django.db import models

class photo(models.Model):
    file = models.FileField(upload_to='file')

I hope my problem is understandable, if not, please ask for more info. I will happily provide it.

valerionas
  • 11
  • 3
  • The issue here is that a `
    ` only sends the `` and `
    – Tim Roberts Apr 30 '22 at 23:14
  • Can i somehow make tag to get my image? – valerionas Apr 30 '22 at 23:49
  • @valerionas check this answer out https://stackoverflow.com/a/68182158/4359728 it goes over how it can be done – Bets May 01 '22 at 00:15
  • And in case you need to convert the Data URI to a blob, you can check this out https://stackoverflow.com/questions/12168909/blob-from-dataurl – Bets May 01 '22 at 00:17
  • Making it an `` tag is not enough. If you allow that `
    ` to submit, then you're going to get a new page loaded. The AJAX solution above is the right answer.
    – Tim Roberts May 01 '22 at 00:29
  • sending webcam video with Flask - but the same JavaScript could be used with Django [furas / python-examples / flask / webcam](https://github.com/furas/python-examples/tree/master/flask/web%20camera%20in%20browser%20-%20canvas%20-%20take%20image%20and%20upload%20to%20server) – furas May 01 '22 at 02:29

0 Answers0