Как отправить данные холста из JavaScript в Django с помощью AJAX

Question

Я работаю над приложением django, где пользователь может запускать веб-камеру и делать снимки.Эта фотография сохраняется на холсте.Я хочу отправить это изображение в представления django, с помощью которых оно может быть сохранено на сервере django.

Я использую webrtc для запуска веб-камеры.Мне было трудно сохранять данные с помощью самого js и где-то читать, что это невозможно только с одним js.Поэтому я сейчас пытаюсь отправить данные на python, используя ajax, но не могу.Я новичок в работе с canvas и ajax, поэтому подробное объяснение будет полезно.

Я пытался работать с этими ответами, но ни один из них, похоже, не помог

Отправить данные изображения холста (Uint8ClampedArray) на сервер Flask через Ajax

Не могу отправить данные обратно в Django из JS AJAX

вот мой код

html template

<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>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Retake</button>
<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>

Не уверен, нужна ли форма для use_image для отправки данных в python.

код 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 dataURL = 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: JSON.stringify(dataURL),
                data: {
                    imageBase64: dataURL
                }
            }).done(function() {
                console.log('sent');
            });
        });
    });

});

Я почти уверен, что напуталчасть AJAX.

Я до сих пор не написал ни одного кода для сохранения изображения с помощью Python, но я думаю, это будет легко, если я смогу каким-то образом преобразовать данные холста в формат JPEG или PNG, а затем отправить его впитон.Я также не понял, почему мы должны конвертировать данные холста в base64.Неужели мы просто конвертируем это в png?

Пожалуйста, помогите мне.Спасибо

[EDIT1]

python views.py

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

Answer 1

Возможно, ваш код работает нормально, но это очень важно:

 ...


            data: JSON.stringify(dataURL),
            data: {
                imageBase64: dataURL
            }

Невозможно создать объект с двумя одинаковыми ключами доступа.Даже не нужно дважды вводить одни и те же данные.

Удалите строку JSON.stringify и повторите попытку!Я уже сделал это с помощью websocket, я не вижу причин, по которым он не работает!

data: image / png; base64, iVBORw0K ...

Также попробуйте:

.toDataURL("image/png")

Проверьте, работает ли соединение.

Опубликовать полный журнал ошибок!Возможно, у вас есть ошибки разрешения, если вы хотите сделать это программируемым без запроса пользователя (щелкните).

Я считаю это!

var dataURL = "I Need to be global";

document.getElementById("snap").addEventListener("click", function(){

            // WORK ON CLICK    
            ...
           dataURL = canvas.toDataURL();


            // ATTACHING EVENT - NO CALL 
            $("#use_image").click(function() {
               // This will work only on click again on use_image
            })