Passing A JavaScript Variable In An HTML File To A Django View Function

Using Django Templates & Frontend
57

Below when I used document.write(facialImage); inside the takepicture() function, I was able to see the correct URL for the image that had been taken as a snapshot from the camera.

/*Capture a frame from the video stream.*/
        function takepicture() {
            var context = canvas.getContext('2d');
            if (width && height) {
                canvas.width = width;
                canvas.height = height;

                /*The canvas takes a snapshot of the video.*/
                context.drawImage(video, 0, 0, width, height);

                /*toDataURL('image/png') returns a data URL containing a
                  representation of the image in PNG format.
                  
                  'facialImage' will hold the URL link of each image that is
                  captured from the camera.*/
                facialImage = canvas.toDataURL('image/png');

                /*'src' is the name of the attribute whose value is to be set.
                  'facialImage' is a string containing the value to assign to the attribute.
                  
                  The data is fed as a source of the image element.*/
                photo.setAttribute('src', facialImage);

                // let facialImageURL = '<img src="'+facialImage+'"/>';

                // document.write('<img src="'+facialImage+'"/>');

                // 'facialImage' holds the URL of the image taken from the camera.
                // document.write(facialImage);

            }else {
                clearphoto();
            }
        }

        /*The following code will call the startup() function when
          the HTML page is loaded.*/
        window.addEventListener('load', startup, false);
    })();

    var URL = "{% url 'facial-login-result' %}";
    csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val();

    /*POST the data (the facial image) to the server via AJAX.*/
    function SendFacialImage() {
        // var facialImage = {'facialImage': facialImage};
        // $.post(URL, facialImage,
        
        //     {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value}, 
            
        //     function(response) {
        //         if(response === 'success')
        //         { 
        //             alert('Facial Image Successfully Sent!'); 
        //         }
        //         else{ 
        //             alert('Error Sending Facial Image!'); 
        //         }
        //     }
        // );

        $.ajax({
            url : URL,
            type: "POST",
            data : {
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                facialImage,
            },
            dataType : "json",
            /*https://stackoverflow.com/questions/8614947/jquery-and-django-csrf-token*/
            /*"success" is what happens when the server responds successfully
              'response' is the response from the Django view (a json object).*/
            success: function(response){
                // $(".sendButton").
            }
        });
    }

    /*A page can't be manipulated safely until the document is "ready." 
      jQuery detects this state of readiness for you. Code included inside 
      $( document ).ready() will only run once the page Document Object Model
      (DOM) is ready for JavaScript code to execute.*/
    $(document).ready(function(){
        $("#sendButton").click(function(){
            SendFacialImage();
        });
    });

    function GetImageURL() {
        document.getElementById("imageURL").value = facialImage;
    }