如何使用Ajax将JavaScript的画布数据发送到Django

Question

I am working on a django application where the user can trigger the webcam and capture a photo. This photo is saved in a canvas. I want to send this image to django views, through which, the image can be saved inside the django server.

I am using webrtc to trigger the webcam. I was having a hard time saving the data with js itself and read somewhere that this is not possible with js alone. So I am now trying to send te data to python using ajax but am not able to. I am a beginner with working with canvas and ajax so, a detailed explanation will be helpful.

I tried working with these answers, but none of them seemed to help

Send canvas image data (Uint8ClampedArray) to Flask Server via Ajax

Can't send data back to Django from JS AJAX

here is my code so far

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

Not sure if a form is needed for use_image to send data to python.

// 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');
            });
        });
    });

});

I am pretty sure I have messed up the ajax part.

I still have not written any code to save the image with python, but I am guess that will be easy if I can somehow convert the canvas data to a jpeg or png and then send it to python. I also did not understand why we have to convert canvas data to base64. Cant we just convert that to png?

Please help me. Thank you

[EDIT1]

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

Answer 1

Maybe you code works fine but this is critical :

 ...


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

You cant create object with two same key access. Even no need to inject twice time same data.

Remove JSON.stringify line and then try again! I already done this with websocket i don't see reason for not working!

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

Also try :

.toDataURL("image/png")

Check connection did work.

Post full errors log ! Maybe you have permission bugs if you wanna do it programmability with no user request (click).

I fount it !

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

Answer 2

I'm sending the rgba pixels array to django views with ajax.
In your case, the code would like:

        var data_pixel = canvas.getContext('2d').getImageData(0, 0, 640, 480).data;
        $("#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: 'image': JSON.stringify(data_pixel),
            }).done(function(data) {
                console.log(data['response']);
            });
        });

Besides, add below scripts to avoid the csrf_token after ajax

// csrf code
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

In views:

def img_submit(request):
    data_image = request.POST.get('image')
    data_image_parse = json.loads(data_image) # parse JSON.stringify and would be a dictionary
    data_image = list(data_image_parse.values()) # convert to list and would be length of 640 * 480 * 4
    image = np.array(data_image).reshape(480, 640, 4) # here is your image data and you can save it
    response = {}
    response['response'] = 'whatever you want to say' 
    return JsonResponse(response)

Notice that the django has DATA_UPLOAD_MAX_MEMORY_SIZE of 2.5MB but you can change this default in settings.
Hope this helps!