1

I am currently developing a simple website and I am having trouble as I am new to Django and AJAX.

I would like for the user to select an image from their computer and then be able to process and display the image without refreshing the page. I was able to do simple color thresholding using only JavaScript, however some of the more complex processing will need to be done using Python, which is why I am using Django.

Javascript

    $("#interactBtn").click(function()  {
        var img = document.getElementById('inputImageFileInput').files[0];
        $.ajax({
            type: "POST",
            url: 'threshold',   //does this look okay?
            data: img,
        }).done(function(data)    {
            var canvas = document.getElementById('imagesTabProccessedImg');
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.putImageData(data, 0, 0);
    }
});

views.py

def threshold(img):
    # how to load image as OpenCV image
    # imagine proccessing here
    return img

I'm not quite sure where to go from here. From what I have researched, I think it should be possible, I'm just lost.

  • Will my ajax request send the image data?
  • In what format will the image be sent to the python code?

Thanks in advance for the help!

Joe Van Treeck
  • 11
  • 2
  • Check here: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Cory Madden Jul 20 '17 at 00:53
  • are you sure you have to send it to the backend? If you want to display it check my answer here https://stackoverflow.com/questions/45098439/how-to-show-selected-image-in-imagefield-file-in-template/45098792#45098792 – hansTheFranz Jul 20 '17 at 02:22
  • Yes I believe I do. I was able to do simple RGB channel thresholding using only Javascript, but I also need to do some more complicated image processing such as adaptive thresholding and adding gaussian noise. While some of these things may be possible in Javascript, they would be a **major** pain, while they can be easily accomplished using OpenCV in Python. – Joe Van Treeck Jul 20 '17 at 02:38
  • Thank you for the link Cory. I implemented what I saw in that link and other related searches. However, I am still having issues. – Joe Van Treeck Jul 20 '17 at 02:43
  • I just checked Django's server log and noticed that on each button click, I got the message `Forbidden (CSRF token missing or incorrect.): /aria_test1/threshold` – Joe Van Treeck Jul 20 '17 at 04:18

0 Answers0