Как сохранить изображение на сервер с помощью JavaScript и Python

Question

Я работаю над приложением Django, где пользователь может нажать кнопку, чтобы запустить веб-камеру.После запуска веб-камеры пользователь может сохранить изображение на сервере Django.Прямо сейчас мой код может сделать снимок с помощью JavaScript.Но я застрял, пытаясь сохранить изображение на сервере Django.Пока это мой код

HTML-шаблон

<center>
    <button type="button" name="button" class='btn btn-outline-dark btn-lg' id='start'>Start Video Capture</button>
    <div class="container-fluid mt-2">
        <video id="video" width="640" height="480" autoplay></video><br>
        <button type="button" data-toggle="modal" data-target="#image_model" class="btn btn-lg btn-dark" id="snap">Snap Photo</button>
    </div>
</center>

<form action="{% url 'img_submit' %}" method="post" class="image_submit_form">
    {% csrf_token %}
    <input type="submit" value="Use Image" class="btn btn-primary" id="use_image">
</form>

javascript

// Grab elements, create settings, etc.
var video = document.getElementById('video');
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

document.getElementById('start').addEventListener("click", function() {
    // Get access to the camera!
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true
        }).then(function(stream) {
            //video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }

    $('#snap').fadeIn();

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);

        var url = canvas.toDataURL();

        $("#use_image").click(function() {
            let $form = $(".image_submit_form");
            let form_data = new FormData($form[0]);
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                dataType: "json",
                data: {
                    url: url,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(json) {
                    alert("Successfully sent the URL to Django");
                },
                error: function(xhr, errmsg, err) {
                    alert("Could not send URL to Django. Error: " + xhr.status + ": " + xhr.responseText);
                }
            });
        });
    });

});

Я пытаюсь использоватьajax для отправки изображения холста в представления django, где я могу сохранить изображение на сервере с python.

Пока это мой код на python.Я пытаюсь проверить, правильно ли я получил данные для сохранения

django views

def img_submit(request):
    url = request.POST.get('url')
    return HttpResponse(url)

Но это ничего не возвращает.Как мне получить доступ к изображению через python и как мне сохранить изображение?

Спасибо

Answer 1

две вещи:

1. В вашем $.ajax звонке я бы предложил использовать method: "POST". Подробнее читайте здесь: http://api.jquery.com/jquery.ajax/, но по умолчанию кажется «GET». Я не часто использую jQuery, так что это просто неопытное предложение от меня, любого, кто его использовал, не стесняйтесь комментировать, и я обновлю свой ответ.

2. В вашем коде Django похоже, что вы ссылаетесь на ожидаемую переменную POST, но я не уверен, как файл передается в вашем запросе AJAX, возможно, он отправляется как файл, и в этом случае вы захочет еще раз проверить документы: https://docs.djangoproject.com/en/2.2/ref/request-response/#django.http.HttpRequest.POST ссылается на другую страницу для файлов: https://docs.djangoproject.com/en/2.2/ref/request-response/#django.http.HttpRequest.FILES (Опять же, при дальнейшем рассмотрении я не уверен, что это правильный путь, чтобы попробовать, но после того, как вы измените свой JS-код, если переменная POST не имеет нужного материала, попробуйте переменную FILES.)

Наконец, я не уверен, что POST является QueryDict, но документы, кажется, указывают на него, вы можете перечислить данные, чтобы увидеть, если вы вообще получаете что-нибудь , попробуйте добавить что-то вроде это для img_submit:

def img_submit(request):
    url = request.POST.dict()
    return HttpResponse(url)