upload image with ajax from camera using p5.js?

qifan

I am using p5.js and its video capture capability to use the camera. I want to use ajax to take some of those images and upload them to a server. I dont know how to convert a p5.js Image object into a format that I can use to send over the wire with ajax. The error I get is:

Uncaught TypeError: Illegal invocation

The problem seems to be that capture is a P5.Image, which isn't something that can be simply uploaded to a server. It's not an image file. It's a data structure specific to P5.js that can render images in P5.js.

So, how do I convert a P5.Image into a file that you can then upload to a server.

And here is the code in the forum:

function process_image(img) {
    var url = "http://random.com/process_image";
    $.ajax({
        url: url,
        type: " POST ",
        crossDomain: true,
        dataType: " json ",
        data: {
            image: img
        },
        success: function (response) {
            console.log(response);
        },
        error: function (response) {
            console.log(response);
        }
    });
}

function setup() {
    createCanvas(900, 900);
    capture = createCapture(VIDEO);
    capture.size(320, 240);
    //capture.hide();
}

function draw() {
    background(255);
    image(capture, 0, 0, 320, 240);
    filter('INVERT');
    process_image(capture);

}

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

http://p5js.org/reference/#/p5.Element/elt

qifan

thanks for formatting, fixed, I'm not sure what I can do with the elt command you linked to.

GoToLoop

elt is a p5.Element property. It points to the underlying HTMLElement.

http://p5js.org/reference/#/p5.Element